добавить элемент перед другим с JQuery

Question

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

<div class="test">1</div> 
<div class="test">2</div> 
<div class="test">3</div> 
<div class="test">4</div> 

Я хотел бы добавить до п-го испытательного элемента нового элемента.

Я могу добавить новый элемент для всех испытываемого элемента с этим кодом:

var newElement = "div class=\"test-new\""; 
$(".test").before(newElement); 

Но я не могу выбрать только нужный элемент, благодаря индексу (пример: 3), эти 2 коды выдает ошибку:

var newElement = "div class=\"test-new\""; 
$(".test")(3).before(newElement); 
$(".test")[3].before(newElement); 

Answer 1

использование insertBefore:

$('<div />').addClass('test-new').insertBefore('.test'); 

Чтобы вставить элемент перед тем н-й элемент использование eq:

$('<div />').addClass('test-new').insertBefore($('.test').eq(0)); 
// Insert before first .test element 

$('<div />').addClass('test-new').insertBefore($('.test').eq(3)); 
// Insert before third .test element 

Индекс eq начинается с нулевой .

Уменьшить набор согласованных элементов до единицы по указанному индексу.

Answer 2

Да, вы не можете использовать синтаксис массива напрямую. Вы можете сделать somethig так:

$($(".test").get(3)).before(newElement); 

Пожалуйста, обратите внимание на двойную доллар «$ ($ (» это необходимо, так как результат получаем() это DOM элемент не элемент JQuery, так что вы должны передать его . JQuery использовать методы JQuery

Answer 3

Существует функция, чтобы выбрать элемент по индексу и по-прежнему держать его как объект JQuery Эта функция .eq():

$(".test").eq(3).before(newElement); 

Это 0 индекс, так 3 выберите 4-й элемент.

Вы должны также обернуть var newElement = "div class=\"test-new\""; между < и > сделать правильный элемент:

var newElement = "<div class=\"test-new\">"; 

JQuery будет интерпретировать это как новый узел вместо селектора.

Answer 4

попробовать что-то вроде этого:

HTML

<div class="test">1</div> 
<div class="test">2</div> 
<div class="test">3</div> 
<div class="test">4</div> 

Jquery

$(".test:nth-child(2)").append("<div>newtest</div>"); 

ВЫВОД

1 
2 
newtest 
3 
4 

FIDDLE

Answer 5

использовать селектор eq в JQuery

var newElement = "div class=\"test-new\""; 
$(".test:eq(3)").before(newElement); 

следует отметить, что newElement должна быть действительной HTML, так что вы можете изменить его на

var newElement = "<div class=\"test-new\"></div>"; 
$(".test:eq(3)").before(newElement); 

скрипки http://jsfiddle.net/0qeh1rL1/

Answer 6

Используйте это, должно работать как шарм :)

$(".test:nth-child(3)").before("<div>new item</div>");