Matching string and then adding number to HTML elements
I have tags in a html list, here is an example of two tags.
<div class="tags">
<ul>
<li>
<a onclick="tag_search('tag1');" href="#">tag1
<span class="num-active">1</span></a>
</li>
<li>
<a onclick="tag_search('tag2');" href="#">tag2
<span class="num-active">1</span></a>
</li>
</ul>
</div>
I would like to write a function through which I can pass a string that will match the strings in the hyperlink ie "tag1" or "tag2" if there is a match, then increment the number in the range if and then add a new li.
I am having problems how to search for a string in a div with class tags and then when I find a match that identifies the element. I can't even get the first bit done as I am using an ID or a class.
I appreciate any help on this with JQuery
Thanks everyone
Code so far
function change_tag_count(item){
alert(item);//alerts the string test
$.fn.searchString = function(str) {
return this.filter('*:contains("' + item + '")');
};
if($('body').searchString(item).length){
var n = $('a').searchString(item).children().text();
n = parseInt(n) + 1;
$('a').searchString(item).children().text(n);
}else{
alert('here');//does not alert this when no li contains the word test
$("#all_tags ul").append('<a onclick="tag_search(\''+item+'\');" href="#">'+item+'<span class="num-active">1</span></a>');
}
}
a source to share
The solution you are still very ineffective. You might be able to use the tag tracking object so far, for example:
var tags = {}; // This will memoize the tags we already have
function tagSearch(text) {
var $match;
if (tags.hasOwnProperty(text)) {
$match = tags[text]; // use the one we stored earlier
} else {
$match = $([
'<li><a href="#" onclick="tagSearch(\'', text, '\'); return false;">',
text, ' <span class="num-active">0</span></a></li>'
].join('')).appendTo($('#all_tags ul'));
tags[text] = $match; // hold onto this for next time
}
var $countSpan = $match.find('span.num-active');
var count = parseInt($countSpan.text(), 10) + 1;
$countSpan.text(count);
}
I'm not sure what is your end goal with this code. Depending on what you want to do with it, there are probably much more elegant ways to write this code that will allow you to avoid having to attach onclicks to the elements themselves, but I've stuck with how you wrote it so far.
I have tested this code and it seems to work given my understanding of your requirements.
a source to share
I have not tested this code, but it should work. I would recommend to keep things simpler in your browser and give each a li and an ID to avoid $.each()
, as you could accomplish the same thing simply with$("#item").length
function tagSearch(item) {
$(".tags").find("li").each(function() {
if($(this).find("a").text() == item) {
var n = $(this).find("span").text();
n = parseInt(n) + 1;
$(this).find("span").text(n);
} else {
$(this).parent().append('<li>some html stuff</li>');
}
});
}
a source to share
Just use jQuery selector:contains
:
var $matchingElements = $('*:contains("Foo")');
Here's a quick plugin that does what you want:
$.fn.searchString = function(str) {
return this.filter('*:contains("' + str + '")');
};
Use it like this:
// Return all `a` elements in the DOM containing the string 'Foo' as a chainable jQuery object
$('a').searchString('Foo');
// E.g.
$('a').searchString('Foo').addClass('highlight');
a source to share
That's what I think. First of all, change the div class to ID. Then:
<script language="javascript" type="text/javascript">
function tagSearch(tagToFind){
var found=0;
$("#tags>ul>li").each(function(index){
if ($(this).children("a").html().indexOf(tagToFind)!=-1 && !found)
{
var spanNum=parseInt($(this).find("span").html());
$(this).find("span").html((spanNum+1));
found=1;
}
else if (index==$("#tags>ul>li").last().index() && !found)
{
$("#tags>ul").append('<li><a href="#">tag'+(index+1)
+' <span class="num-active">1</span></a></li>');
}
});
}
</script>
</head>
<body>
<div id="tags">
<ul>
<li>
<a onclick="tagSearch('tag1');" href="#">tag1
<span class="num-active">1</span></a>
</li>
<li>
<a onclick="tagSearch('tag2');" href="#">tag2
<span class="num-active">1</span></a>
</li>
</ul>
</div>
</body>
Then I configured your event structure to automatically perform this action if you click on one of these links. The part I don't understand is how you would have an li that MUST NOT match ...
a source to share