如何加載多個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干杯-傑里米