Question

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

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

但是下一个函数似乎不喜欢：contains selector。这是执行搜索的功能。

      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标头。这样的事情。

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

仅使用类.linkcard_header搜索div的一部分。我只想搜索div的标题而不是内容。但这打破了搜索。如何让nextAll（）查看div中的特定类？

Answer 1

我认为你想使用find，接下来只是返回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

Answer 2

这个问题的答案结合了IAbstractDownvoteFactory，Rocket和Maxedison的建议。要获取链接卡，我需要nextAll（），find（）和eq（0）。谢谢你指点我正确的方向。我结束了这个。

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

这是完整的功能。

    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);
               card_id = result.first().parent().attr('id');
            }
            else { 
               search_select = '.linkcard_header:containsi("'+search_str+'")';
               result = $('#'+card_id).nextAll().find(search_select).eq(0);
               card_id = result.parent().attr('id');
            }
            if (result.length == 0 || result.length == null) { 
               alert('No LinkCard found containing that string.'); 
               return;
            }

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

Answer 3

你面临的主要挑战是next()甚至nextAll()只适用于当前元素的兄弟姐妹（前者只检查下一个兄弟，后者会检查所有后来的兄弟姐妹）它）。如果您知道您想要的搜索结果将始终是当前结果的兄弟，那就没关系。但如果情况并非如此，那么我建议您执行以下操作。事实上，你可能只想这样做：

var search_select = ':contains("'+search_str+'")';
var allResults = $(search_select);

立即获取所有结果。然后对找到的第一个结果（allResults.eq(0)）进行突出显示，脉动等。随后的“查找下一个结果”操作只会在某处增加一个计数器并使用该计数器执行allResults.eq(i)（其中i是计数器）。

Answer 4

$('#'+card_id).siblings(':containsi("'+search_str+'"):first');

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

4 个答案: