JQuery .nextUntil () выбирая заголовок в li - PullRequest
Новая
       30

JQuery .nextUntil () выбирая заголовок в li

1 голос
/ 30 марта 2020

Я пытаюсь выбрать все теги h3 в тегах h2, даже если в li есть ul или ol на странице, используя .nextUntil ().

HTML разметка выглядит так: 

<h2></h2>
  <h3></h3>
  <h3></h3>
  <h3></h3>
<h2></h2>
  <h3></h3>
  <h3></h3>
  <h3></h3>
<h2></h2>
  <ol>
    <li>
     <h3></h3>
    </li>
    <li>
     <h3></h3>
    </li>
    <li>
     <h3></h3>
    </li>
  </ol>

Js имеет вид: 

var h2s = $('h2').toArray();

var h3s = [];

for (i = 0, i < h2s.length, i++){

  h3s.push($('h2').eq(i).nextUntil('h2', 'h3, li h3').toArray());

};

console.log(h3s);

Ожидаемый результат: 

h3s[

 0: (3) [h3, h3, h3]
 1: (3) [h3, h3, h3]
 2: (3) [h3, h3, h3]

]

В то время как реальный результат: 

h3s[

 0: (3) [h3, h3, h3]
 1: (3) [h3, h3, h3]
 2: []

]

Ответы [ 2 ]

0 голосов
/ 31 марта 2020

Я понял это после многих экспериментов, благодаря Bilel's each() & if(){}.

вот полный образец https://playcode.io/533251 с консолью .

Чтобы получить все теги h3 ниже каждого тега h2, даже если они находятся в <ol> или <ul>

var h3s = [];

var i = 0;

$('h2').each(function(){

  if ($('h2').eq(i).nextUntil('h2').find('h3').length > 0) {

     h3s.push($('h2').nextUntil('h2').find('h3').toArray());

  } else {

     h3s.push($('h2').eq(i).nextUntil('h2', 'h3').toArray());

  } i++;

});

Или мы можем поместить оператор if(){} в простой for(){} l oop в зависимости от длины массива всех тегов h2 на странице 

var h2s = $('h2').toArray();

var h3s = [];

for (i = 0; i < h2s.length; i++) {

  if ($('h2').eq(i).nextUntil('h2').find('h3').length > 0) {

     h3s.push($('h2').nextUntil('h2').find('h3').toArray());

  } else {

     h3s.push($('h2').eq(i).nextUntil('h2', 'h3').toArray());

  }

};
0 голосов
/ 30 марта 2020

[ОБНОВЛЕНО, чтобы соответствовать различным шаблонам кода]

jQuery .nextUntil () ожидает разделитель (как <h2> здесь в вашем примере). Таким образом, последняя часть кода HTML, в которую вложены элементы <h3>, не будет учтена. Во-первых, потому что в конце нет <h2>. И второе, потому что они не братья и сестры.

Используя ваш код, я просто добавил условное pu sh, где я сначала проверяю, является ли <h3> следующим элементом. 

var h3s = [];
i=0;
$( "h2" ).each( function( index, element ){
  if($(this).next('h3').length>0){
    if($(this).is('h2:last-of-type')){
h3s.push($('h2').eq(i).nextUntil('section').toArray());

} else {
  h3s.push($('h2').eq(i).nextUntil('h2').toArray());
  } }  else{
  h3s.push($('h2').eq(i).nextUntil('h2').find('h3').toArray());
  }
  i++;
});

console.log(h3s);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2></h2>
  <h3></h3>
  <h3></h3>
  <h3></h3>
<h2></h2>
  <ol>
    <li>
     <h3></h3>
    </li>
    <li>
     <h3></h3>
    </li>
    <li>
    
    </li>
  </ol>
<h2></h2>  
  <h3></h3>
  <h3></h3>
  <h3></h3>
<section>

PS: обратите внимание, что я удалил последнюю <h3> для демонстрационной демонстрации здесь, чтобы вы могли определить последнюю часть!

...