How to load multiple ul's and extracting specific lis?

I have a document (sitemap) with a few uls 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 uls 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>
<u开发者_开发技巧l>
  <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 uls 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?

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

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