JQuery: Пытаясь понять следующую() функцию

Я с помощью JQuery следующего() метода на следующий HTML:JQuery: Пытаясь понять следующую() функцию

<div id="NavBar"> 

    <div class="dropDownList"> 
     <ul> 
      <li><a href="#"><span>Home</span></a></li> 
      <li><a href="#"><span>Products</span></a> 
       <ul> 
        <li><a href="#"><span>test</span></a> 
        <li><a href="#"><span>test</span></a> 
       </ul> 
      </li> 
      <li><a href="#"><span>Company</span></a> 
      </li> 
      <li><a href="#"><span>Contact</span></a></li> 
     </ul> 
    </div> 

    <div class="dropDownList"> 
     <ul> 
      <li><a href="#"><span>Home</span></a></li> 
      <li><a href="#"><span>Products</span></a> 
      </li> 
      <li><a href="#"><span>Company</span></a> 
      </li> 
      <li><a href="#"><span>Contact</span></a></li> 
     </ul> 
    </div> 
</div>

я добавил следующий обработчик щелчка, чтобы якоря в списке и написал текущие и элемент следующего() на консоли так:

$('.dropDownList > ul > li > a').click(function() { 

    console.dir($(this)); 

    var checkElement = $(this).next(); 

    console.dir(checkElement); 
    }

Когда я нажимаю «Products» элемент списка первой ул я вижу это в консоли: enter image description here

Итак, я вижу, что первый элемент - это якорь, а следующий - ul - это имеет смысл для меня. Теперь моя путаница возникает, когда я нажимаю элемент списка «Продукты» во второй строке ul. Я возвращаю два объекта, как раньше, но на этот раз они оба являются якорями. Я думал, что первым элементом привязки будет «Products», а второй будет «Company», потому что это следующий элемент в элементе списка или, может быть, даже элемент <li>, содержащий следующий якорь. Вместо этого, когда я перехожу к объектам консоли, они выглядят одинаковыми. Поле text и textContent одинаковое для обоих: enter image description here

Почему это?

источник

2014-01-28 red888

В следующем примере следующий элемент в списке не является братом для якоря a; это родственник его родителя li.

Это Products якоря не имеет .next() элемента, и вы должны увидеть в консоли, что $(this).next() является пустым объектом JQuery с нулем .length. http://jsfiddle.net/mblase75/6LFPG/

источник

2014-01-28 18:37:13 Blazemonger

А я понимаю. next() получает следующий _sibling_. Второй объект, который я просматривал в консоли, - это объект jquery с нулевой длиной, как вы говорите. Я был смущен, потому что .text второго объекта был «a», но это только потому, что объект, первоначально переданный ему, был «a» - правильно? – red888

Видимо, хотя это не то, что я ожидал. Тем не менее, вероятно, поэтому рекомендуется только проверять '.length', чтобы увидеть, действительно ли объект jQuery содержит элемент DOM. – Blazemonger

Так что проблема в том, что в вашем якоре нет следующего(), он вернет null. Поэтому в этом случае вам придется подойти к родителям и получить следующего брата. Вот очень быстрый пример того, как это можно сделать.

var CheckElement; 
if($(this).next().length != 0){ 
    checkElement = $(this).next(); 
} 
else{ 
    checkElement = $(this).parent().next(); 
}

источник

2014-01-28 18:54:53 Dan

Метод JQuery next() приводит вас к следующему родственнику выбранного элемента.

Братья и сестры - это те элементы, которые имеют одинаковые родители. Из вашего данного HTML

 <li><a href="#"><span>Products</span></a>   //child of 'li' 
      <ul>  <----------------------------------//child of 'li' 
       <li><a href="#"><span>test</span></a>  
       <li><a href="#"><span>test</span></a> 
      </ul> 
     </li>

Что вы выбрали был первым ребенком. Итак, когда вы вызвали следующий в первом примере, он выбрал следующего ребенка.

В вашем втором примере нет второго ребенка для перемещения, поэтому по умолчанию используется пустой элемент jquery.

источник

2014-01-28 19:11:26 Oak

JQuery: Пытаясь понять следующую() функцию

ответ

Смежные вопросы