Получение nth: потомок определенного типа элемента

Question

Пример кода:

<div id="top">
    <h1></h1>
    <div></div>
    <h2></h2>
    <div>Get this one</div>
    <h3></h3>
    <div></div>
</div>

Итак, я знаю, что могу получить это, используя

$('#top:nth-child(4)').etc...

, но могу ли я получить это, сказав: «получить второго потомка, который является элементом div»"вместо того, чтобы просто" получить четвертый дочерний элемент "?

Надеюсь, это имеет смысл.

Answer 1

Вы можете просто использовать селектор nth-of-type (число).Вот вам

CSS

#top > div:nth-of-type(2) {
  /*Your css*/
}

или в Jquery

$("#top > div:nth-of-type(2)").method();

Кстати, это тот же селектор.Я просто использую css nth-of-type(2) селектор на Jquery селектор

Answer 2

$('#top > div')[1] или $('#top > div').get(1) будет делать то, что вы хотите.Там написано: «Возьми div немедленно внутри #top, а затем выбери 2-ую».$('#top div') (вместе с .get(1)) в этом случае даст тот же результат, но это будет означать "захватить все div, которые являются потомками #top", то есть будет подсчитана даже #top> div> div # deep2.

Как отметил Йоханнес, $('#top > div:nth-of-type(2)') - это короткий код для этого, но я бы сначала ознакомился с основами - вы можете выбрать непосредственных потомков типа с помощью каретки (>) и всех потомков типа спространство ( ).

Answer 3

$('#top').children('div').eq(1).html()

Над линией подразумевается;если вы считаете от 0, получите 2-й div, который является потомком top div.

Answer 4

Да, с nth-of-type, что относится к самому типу тега (в данном случае div), а не к классам или дочерним элементам в целом:

$('#top > div:nth-of-type(2)').etc.

ДОБАВЛЕНИЕ после дополнительного вопроса в комментарии:

Вы не можете выбрать n-й DIV с определенным классом с помощью селекторов CSS, но с помощью jQuery.

$("#top > div.x").eq(1).css("color", "blue");

eq() выбирает n-й элемент в коллекции (то есть ввыбор сделан раньше).Обратите внимание, что его индекс начинается с 0, поэтому eq(1) выбирает второй элемент в коллекции:

$("#top > div.x").eq(1).css("color", "blue");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top">
    <h1>H1</h1>
    <div class="x">1st DIV with class "x"</div>
    <h2>H2</h2>
    <div>DIV</div>
    <h3>H3</h3>
    <div>DIV</div>
    <div class="x">2nd DIV with class "x"</div>
    <h2>H2</h2>
    <div>DIV</div>
    <h3>H3</h3>
    <div class="x">3rd DIV with class "x"</div>
</div>