Как загрузить несколько ul и извлечь конкретные lis? - PullRequest
Новая
       9

Как загрузить несколько ul и извлечь конкретные lis?

0 голосов
/ 15 января 2011

У меня есть документ (карта сайта) с несколькими ul s. 

<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, а скореесоздайте новый список со всеми результатами.

Так что на самом деле я хочу извлечь всех элементов .matched из их родительских ul s и обернуть их в новыйul.Так что у меня есть только ul со всеми сопоставленными результатами, а не несколько ul с некоторыми .matched элементами.

Как мне этого добиться?

Ответы [ 2 ]

0 голосов
/ 15 января 2011

Итак, вы хотите что-то вроде 

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

немного короче и легче для чтения .. просто некоторые альты там .. hth Cheers -Jeremy

0 голосов
/ 15 января 2011

Если честно, было бы быстро, если бы вы обернули оба места каким-нибудь тегом 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 Приветствия -Джереми

...