jquery - 查找包含字符串的下一个元素

Question

我想实现 div 的搜索功能。我想搜索一个 div，找到它，然后使用相同的字符串找到包含该字符串的下一个 div。我有这个来做搜索。

               search_select = ':containsi("'+search_str+'")';
               result = $('#'+card_id).next(search_select);

但是下一个函数似乎不喜欢 :contains 选择器。这是执行搜索的函数。

      var linkcard_search_string = null;
      var last_search_card_id = null;
      function find_linkcard() {
            var search_str = prompt("Enter search string to find LinkCard:",linkcard_search_string);
            var search_select ='';
            var result;
            var card_id = last_search_card_id;
            if (card_id == null) {
               search_select = '.linkcard_header:containsi("'+search_str+'")';
               result = $(search_select);
            }
            else { 
               search_select = ':containsi("'+search_str+'")';
               result = $('#'+card_id).next(search_select);
            }
            if (result.length == 0 || result.length == null) { 
               alert('No LinkCard found containing that string.'); 
               return;
            }
            card_id = result.first().parent().attr('id');

            // Scroll LinkCard into view
            linkcard_top = $('#'+card_id).position().top+40;
            $('#'+card_id).effect("pulsate", { times:4 }, 500);
            $('#'+card_id).show('highlight',{color: 'lightcyan'},'slow');
            $('#'+card_id).addClass('highlight_linkcard');
            $('#matting').scrollTop(linkcard_top);

            last_search_card_id = card_id;
            linkcard_search_string = search_str;
      }

是否有更好的方法来搜索包含从给定元素开始的字符串的下一个元素？

更新

有很多好的建议可以进行搜索。我现在拥有的是这个。

       search_select = ':containsi("'+search_str+'")';
       result = $('#'+card_id).nextAll(search_select).eq(0);
       card_id = result.attr('id');

这有效并允许我找到包含搜索字符串的 div。问题是搜索会查看整个 div:标题和内容。我想仅搜索特定类的元素，以将搜索限制为 div header 。像这样的东西。

       search_select = '.linkcard_header:containsi("'+search_str+'")';
       result = $('#'+card_id).nextAll(search_select).eq(0);
       card_id = result.attr('id');

仅搜索 div 中具有 .linkcard_header 类的部分。我只想在标题中搜索 div 而不是内容。但这破坏了搜索。如何让 nextAll() 查看 div 中的特定类？

Answer 1

我认为你想使用 find, next 只是返回 DOM 中的下一个元素:

<li class="one">one</li>
<li>next</li>
<script>
    $('.one').next(); // is [<li>next</li>]
</script>

但 find 将返回匹配对象的数组:

search_select = ':contains('+search_str+')';
result = $('#'+card_id).find(search_select);
result[0]; // first div
result[1]; // second div