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

Question

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

<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 div 加载到当前页面中。这实际上很好。但是现在我的结果只是 uls 显示找到的列表元素和不匹配的设置为 display: none。

这是我当前的 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，还可以创建一个包含所有结果的新列表。

所以实际上我想从其父 uls 中提取所有 .matched 元素并将它们包装到一个新的 ul 中。所以我只是在 ul 上找到了所有 .matched 结果，而不是在 ul 上找到了一些 .matched 元素。

我怎样才能做到这一点？

Answer 1

所以你想要类似的东西

$('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');
    }
)};

更短，更容易阅读.. 只是一些 alts.. hth Cheers -Jeremy

Answer 2

老实说，如果你用一些 id'd 标签包装这两个地方会很快

    <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.. 干杯 -Jeremy