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

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 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 中。所以我只在 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');
    }
)};

更短更容易阅读..只是一些替代品..干杯-杰里米

Answer 2

说实话，如果你用一些 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.. 干杯 -Jeremy