JQuery выбрать следующий div по классу

Question

У меня есть следующий HTML:

<div class="row">
<div class="fourcol "> <a class="getNote" id="1" href="#">Create a Skybox</a> </div>
<div class="fourcol "> <a class="getNote" id="2" href="#">Add images to sky box</a> </div>
<div class="fourcol last"> <a class="getNote" id="3" href="#">Delete a sky box</a> </div>
<div class="row">
    <div class="twelvecol noteDetails"></div>
</div>
<div class="fourcol "> <a class="getNote" id="4" href="#">Change a skybox</a> </div>
<div class="fourcol "> <a class="getNote" id="5" href="#">Cool a skybox</a> </div>
<div class="fourcol last"> <a class="getNote" id="6" href="#">Hey a skybox</a> </div>
<div class="row">
    <div class="twelvecol noteDetails"></div>
</div>
<div class="fourcol "> <a class="getNote" id="7" href="#">one more</a> </div>
<div class="row">
    <div class="twelvecol">
        <div class="noteDetails"></div>
    </div>
</div>

Как выбрать первый div с классом noteDetails?

Я пробовал:

$('#1').closest("div.noteDetails").html('test');

, но это не работает.

Редактировать: что я действительно хочу сделать, например, если я нажму на ссылку с идентификатором 4, то я хочу обновить ближайший .noteDetails (который в этомcase является вторым .noteDetails)

Answer 1

Вы пытаетесь сделать:

$("div.noteDetails").first()

Answer 2

$('div.noteDetails').filter(':first')

Answer 3

Попробуйте это:

$("#1").next(".noteDetails").html("test");

Answer 4

То, что вы просите, на самом деле немного сложнее из-за того, как у вас есть настройки HTML. Вам также здесь не хватает множества закрывающих тегов ...

Гораздо проще искать вещи, если они прямые братья и сестры. Добавление другого класса к элементам .row, содержащим такие детали, как class="row rowDetails", сделает это немного проще.

При этом будет найден следующий, использующий ваш текущий HTML.

$( "a.getNote" ).click( function( event ) {
    // traverse up to the "row"
    var noteDetails = $( this ).closest(".row")
    // find the next siblings that contain a .noteDetails
            .nextAll().has( ".noteDetails" )
    // limit to the first match
            .first()
    // and then find the .noteDetails it contained
            .find(".noteDetails");
});

Если вы измените HTML, как я предлагал, вы можете заменить .nextAll().has( ".noteDetails" ) на .nextAll( ".rowDetails" ). Использование класса для селектора на nextAll() будет намного быстрее, чем необходимость фильтровать с помощью .has().

Answer 5

$("div .noteDetails").first();

Дает вам div class="row"

Поместите это где-нибудь для тестирования, добавив некоторый дополнительный класс к каждому из классов noteDetails, чтобы увидеть, выбран ли правильный

document.write($("div .noteDetails").first().attr("class"));

Это должно вывести только имя класса вашего желаемого div и ничего другого.

Итак, чтобы проверить, добавьте класс first к первому примечаниюDetails div и класс second к следующему и т. Д.

На экране должно отображаться twelveCol noteDetails first.

Answer 6

$("div.noteDetails:first").html('test');