Finding the next element containing a string
<p>I want to implement a search feature for divs.  I want to search for a div, find it, and with the same string find the next div containing that string.  I have this to do the search. </p>

<pre><code>               search_select = ':containsi("'+search_str+'")';
               result = $('#'+card_id).next(search_select);
</code></pre>

<p>But the next function doesn't seem to like the :contains selector.  Here is the function that performs the search.</p>

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

<p>Is there a better way to search for the next element containing a string starting from a given element?</p>

<p>UPDATE </p>

<p>There were a lot of good suggestions to do the search.  What I have now is this.</p>

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

<p>This works and allows me to find the divs containing the search string.  The problem is that the search looks in the entire div: header and contents.  I would like to search only an element of a specific class to restrict the search to the div header.  Something like this.</p>

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

<p>to search only the part of the div with class .linkcard_header.  I only want to search the header for the div and not the contents.  But that breaks the search.  How do I make nextAll() look at a specific class within the div?</p>
