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 s，其中显示了找到的列表元素，未匹配的列表元素显示为：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，而是创建一个包含所有结果的新列表。

所以实际上我希望从其父ul中提取所有.matched元素，并在新ul中包装。所以我只使用了所有.matched结果的ul，而不是带有一些.matched元素的ul。

我怎样才能做到这一点？

Answer 1

老实说，如果你用两个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 .. hth Cheers -Jeremy

Answer 2

所以你想要像

这样的东西

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

假设你们所有的人都在上课......但是如果你想通过html匹配你可以做到......

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

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

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

2 个答案: