jQuery - выберите дочерний элемент элемента

Question

Я хочу выбрать второе div-child первого div-child формы.

Если у меня есть этот HTML:

<form id="hello"></form> 
<form method="get"> 
    <p class="search-box"></p> 
    <div class="tablenav top"> 
     <div class="alignleft actions bulkactions"> </div> 
     <div class="alignleft actions"></div> 
     <div class='tablenav-pages one-page'></div> 
    </div> 
</form> 
<div class="tablenav bottom"></div> 

..Я хочу, чтобы выбрать второго ребенка DIV из «tablenav сверху» DIV внутри формы. Затем вставьте div рядом с ним.

Это, очевидно, неверно:

jQuery(document).ready(function($) { 
    $("form div:first-child div:nth-child(2)").after("<div class='alignleft actions'><p>New div!</p></div>"); 
}); 

редактировать: Я должен был указан еще несколько вещей - самая первая форма в скрытом DIV, а сама форма содержит несколько дивы. И последний div также содержит несколько div. По-видимому, это влияет на то, какой код будет работать.

Answer 1

Попробуйте

jQuery(document).ready(function($) { 
    $($("form .tablenav .alignleft")[1]).after("<div class='alignleft actions'><p>New div!</p></div>"); 
}); 

Edit: Используя уравнение (1), чтобы получить второй элемент в массиве объектов JQuery является гораздо чище способом.

jQuery(document).ready(function($) { 
 
     $("form .tablenav .alignleft").eq(1).after("<div class='alignleft actions'><p>New div!</p></div>"); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="hello"></form> 
 
<form method="get"> 
 
    <p class="search-box"></p> 
 
    <div class="tablenav top"> 
 
     <div class="alignleft actions bulkactions"> </div> 
 
     <div class="alignleft actions"></div> 
 
     <div class='tablenav-pages one-page'></div> 
 
    </div> 
 
</form> 
 
<div class="tablenav bottom"></div>

Answer 2

Это работает для меня:

jQuery(document).ready(function($) { 
    $("form .tablenav > div:nth-child(2)").after("<div class='alignleft actions'><p>New div!</p></div>"); 
}); 

Заканчивать этот fiddle.

Answer 3

Вы должны использовать :first, так как :first-child рассматривает все элементы в контейнере, а не только указанные div. Также обратите внимание, что индексы nth-child основаны на 1, поэтому div, который вы ищете, на самом деле nth-child(3). Попробуйте это:

$("form div:first div:nth-child(3)").after("<div class='alignleft actions'><p>New div!</p></div>"); 

Example fiddle

Answer 4

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

$(".tablenav.top div:nth-child(2)").after(your code..) 

Answer 5

$("form .tablenav > div:first div:nth-child(2)").after("<div class='alignleft actions'><p>New div!</p></div>"); 

работал для меня