如何加载多个ul并提取特定的lis？

Question

I have a document (sitemap) with a few ul s in it.

 <h3>Weekday</h3> <ul> <li>Monday</li> <li>Tuesday</li> <li>Wednesday</li> <li>Thursday</li> <li>Friday</li> <li>Saturday</li> <li>Sunday</li> </ul> <h3>Car</h3> <ul> <li>green BMW</li> <li>Mercedes</li> <li>Audi red</li> <li>Renault</li> <li>VW orange</li> </ul> <h3>Color</h3> <ul> <li>green on Saturday</li> <li>blue</li> <li>red</li> <li>orange Friday</li> </ul> 

I'm trying to create a kind of custom AJAX search. The search is not based on real search-results but rather on all values in my sitemap.

When typing I'm loading the #inner div of my sitemap into my current page. This works actually fine. However right now my results are just the ul s with the found list-elements displayed and the not matched ones set to display: none.

This is my current jQuery code:

 var $sr = $('#searchresults'); //container where i want my list to go $sr.load("/sitemap/" + " #inner", function() { $('#searchresults h3').remove(); //removing h3's $('#searchresults ul li').hide(); //hide all results at beginning var term = $('.s').val(); //current searchterm in inputbox var found = $('#searchresults ul li:icontains("' + $('.s').val() + '")'); //check for inputvalue found.addClass('matched'); //if matched addClass of .matched $('#searchresults .matched').show(); $('#searchresults').children().slice(10).hide(); //max number of results }); // end keydown 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h3>Weekday</h3> <ul> <li>Monday</li> <li>Tuesday</li> <li>Wednesday</li> <li>Thursday</li> <li>Friday</li> <li>Saturday</li> <li>Sunday</li> </ul> <h3>Car</h3> <ul> <li>green BMW</li> <li>Mercedes</li> <li>Audi red</li> <li>Renault</li> <li>VW orange</li> </ul> <h3>Color</h3> <ul> <li>green on Saturday</li> <li>blue</li> <li>red</li> <li>orange Friday</li> </ul> 

It works really well however I wonder if and how it is possible to not just load the sitemap and set the not-matched values to display:none but rather create a new list with all the results.

So actually I want to extract all .matched elements from their parent ul s and wrap them in a new ul . So I have just on ul with all the .matched results and not a few ul's with some .matched elements.

How can I achieve that?

Answer 1

to be honest it'd be fast if you wrap both places with some id'd tag so

    <div id='searchresults'><div id='inner'>
    <h3>Weekday</h3>
    <ul>
      <li>Monday</li>
      <li>Tuesday</li>
      <li>Wednesday</li>
      <li>Thursday</li>
      <li>Friday</li>
      <li>Saturday</li>
      <li>Sunday</li>
    </ul>
    <h3>Car</h3>
    <ul>
      <li>green BMW</li>
      <li>Mercedes</li>
      <li>Audi red</li>
      <li>Renault</li>
      <li>VW orange</li>
    </ul>
    <h3>Color</h3>
    <ul>
      <li>green on Saturday</li>
      <li>blue</li>
      <li>red</li>
      <li>orange Friday</li>
    </ul>
</div></div>

than you can just do

$('#searchresults').load("/sitemap/ #inner"); 

and that would be it.. you'r doing it now really.. so why add more to it? If it was me I'd do it the simple way and move on. that is my2cents.. hth Cheers -Jeremy

Answer 2

So you want something like

$('li').each(function(i,e){
    if($('li.class').length>0){
        $(this).appendTo('#searchresults ul');
    }
)};

that is asumed that you what all li 's with class .. but if you want by the html match you could do..

$('li').each(function(i,e){
    if($('li.class').html()==$('.s').val()){
        $(this).appendTo('#searchresults ul');
    }
)};

little shorter and easier to read.. just some alts there.. hth Cheers -Jeremy