Как найти следующий элемент с атрибутом ID с помощью jQuery

Question

Когда я нажимаю на ссылку, мне нужно найти следующий <section>, который имеет атрибут ID и возвращает его идентификатор.

Поэтому, учитывая следующую разметку и javascript, я ожидаю, что нажимаю на ссылку, чтобы написать «section_3» на консоли.

<section id="section_1"> 
    <a href="#" class="findNext">Find</a> 
</section> 
<section></section> 
<section id="section_3"></section> 
<section id="section_4"></section> 

и

$('a.findNext').click(function() { 
    var nextSectionWithId = $(this).closest("section").next("section[id]"); 
    if (nextSectionWithId) { 
     var sectionId = nextSectionWithId.attr('id'); 
     console.log(sectionId) 
    } 
}); 

Но это не работает. Я установил the code up here in jsFiddle.

Любые идеи, почему это не работает?

Answer 1

Try:

var nextSectionWithId = $(this).closest("section").nextAll("section[id]:first"); 

или

var nextSectionWithId = $(this).closest("section").nextAll("section[id]").filter(':first'); 

Fiddle

Вы не можете использовать следующий, потому что следующий будет искать совпадение только в следующем элементе. Таким образом, вы можете использовать nextAll в сочетании с :first в селекторе.

Update

Вы можете использовать метод first() в JQuery для извлечения первого элемента в коллекции, а что кажется более быстрым вариантом.

var nextSectionWithId = $(this).closest("section").nextAll("section[id]").first(); 

Вероятно, может быть эта причина:

Потому что: первое является расширением JQuery и не является частью спецификации CSS, запросы с помощью: первые не могут воспользоваться преимуществами увеличения производительности, предоставляемой родной DOM querySelectorAll(). Для достижения наилучшей производительности при использовании: сначала для выбора элементов, сначала выберите элементы, используя чистый селектор CSS, затем используйте .filter («: first»).

Coutesy @ T.J. Crowder

Answer 2

Использование .nextAll()

DEMO

var nextSectionWithId = $(this).closest("section").nextAll("section[id]")[0].id; 

---

DEMO

var nextSectionWithId = $(this).closest("section").nextAll("section[id]").eq(0).attr('id'); 

---

DEMO

var nextSectionWithId = $(this).closest("section").nextAll("section[id]").attr('id');