Question

我在html列表中有标签，这是两个标签的示例。

<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>

我想编写一个可以传递字符串的函数，它将匹配超链接中的字符串，即“tag1”或“tag2”，如果有匹配则增加跨度中的数字，如果然后再添加一个新的。

我遇到的问题是如何在div中使用类标签搜索字符串，然后找到识别元素的匹配项。我甚至不能做第一点，因为我习惯使用ID或类。

我很欣赏使用JQuery的任何帮助

全部谢谢

到目前为止的代码

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>');    

    }

}

Answer 1

到目前为止，你所拥有的解决方案效率很低。到目前为止，您可能有更多运气使用对象来跟踪标记，如下所示：

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);
}

我不确定此代码的最终目标是什么。根据你想要用它做什么，可能有更多优雅的方法来编写这段代码，这样你就可以避免在元素上隐藏onclicks，但我坚持你现在已经写好的方式了。 / p>

我测试了这段代码，并且考虑到我对你的要求的理解，它似乎正在运行。

Answer 2

我没有测试这段代码，但它应该可行。我建议您在浏览器上更轻松，并为每个li和ID提供避免$.each()，因为您可以使用$("#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>');
        }
    });
}

Answer 3

只需使用the jQuery :contains selector：

var $matchingElements = $('*:contains("Foo")');

这是一个快速插件，可以满足您的需求：

$.fn.searchString = function(str) {
 return this.filter('*:contains("' + str + '")');
};

按如下方式使用：

// 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');

Answer 4

这就是我的想法。首先，将div的类更改为ID。然后：

<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>

然后，如果您单击其中一个链接，我会设置您的事件结构以自动执行此操作。我不明白的部分是你如何得到一个不匹配的李......

匹配字符串，然后在HTML元素中递增数字

到目前为止的代码

4 个答案: