Question

我有以下dom：

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

我想在第n个测试元素之前添加一个新元素。

我可以使用以下代码为所有测试元素添加新元素：

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

但由于索引（例如：3），我无法仅选择所需的元素，这两个代码会抛出错误：

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

Answer 1

使用insertBefore：

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

要在第n个元素之前插入元素，请使用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

有一个函数可以通过索引选择一个元素，并且仍然将它保存为jQuery对象。此功能为.eq()：

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

它是基于0的索引，因此3选择第4个元素。

您还应该在var newElement = "div class=\"test-new\"";和<之间包裹>以制作有效元素：

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

jQuery会将此解释为新节点而不是选择器。

Answer 3

是的，您无法直接使用数组语法。你可以这样做：

select lj.val, isnull(jj.val,0)
  from ( values (1), (2), (3), (4) ) lj(val) 
  left join ( values (1), (2), (4) ) jj(val) 
    on lj.val = jj.val 
 order by lj.val

请注意双元“$（$（”这是必要的，因为get（）的结果是DOM元素而不是jQuery元素所以你需要将它传递给jQuery以使用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

在jquery中使用eq选择器

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>");

用jquery在另一个元素之前添加一个元素

6 个答案: