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

Question

我有一个包含几个ul的文档（站点地图）。

 <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> 

我正在尝试创建一种自定义AJAX搜索。 搜索不是基于真实的搜索结果，而是基于我的站点地图中的所有值。

输入时，我#inner站点地图的#inner div加载到当前页面中。 这实际上很好。 但是现在，我的结果只是显示找到的列表元素的ul ，而设置为不显示的不匹配的元素。

这是我当前的jQuery代码：

 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> 

它确实工作得很好，但是我想知道是否以及如何不仅可以加载站点地图并将不匹配的值设置为display:none还可以创建一个包含所有结果的新列表。

所以实际上我想从其父ul 提取所有.matched元素，并将它们包装在新的ul 。 因此，我仅对所有.matched结果使用ul，而对某些.matched元素仅使用ul。

我该如何实现？

Answer 1

老实说，如果您将两个地方都包裹上一些id标签会很快

    <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>

比你能做的

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

就是这样。.您现在真的在做..那为什么还要添加更多呢？ 如果是我，我会以简单的方式继续进行下去。 那是my2cents .. hth干杯-杰里米

Answer 2

所以你想要像

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

假设您是类..的全部li，但是如果您希望通过html匹配，则可以这样做。

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

有点短，更容易阅读..那里只有一些替代品.. hth干杯-杰里米