javascript - 将变量插入数组项

Question

我的网页中有一组元素，我试图插入一些 html，作为变量存储到匹配的数组项中。例如

<div class="play">
  <div>
    <p>Item to be inserted after this p tag</p>
  </div>
</div>

var elements = $('.play');
//elements length = 4;
var item = '<p>HTML to be inserted</p>'
$(item).appendTo(elements[1]);

在上面的代码中，我试图将“item”插入到 html 中显示的子 div 内的数组中的第二个值中，但是我不确定如何将它插入到子 div 中。目前，这会在包含 .play 的父 html 标记之后插入“项目”。

任何帮助将不胜感激。

Answer 1

请注意，elements它不是数组，而是 jQuery 对象，这意味着您可以使用 jQuery 方法遍历 DOM：

elements.eq(1).find("div").append(item);

演示：http: //jsfiddle.net/rgQ7g/

.eq(1)选择第二个项目，但返回它包装在另一个 jQuery 对象中，所以你可以使用它.find("div")来获取子 div 和.append()你item的。

Answer 2

尝试after()：

$('.play').find('p').after(item);

这会在 DOM 中的选定元素之后插入内容。它也适用于所有名为.play

如果需要指定索引，我推荐一个函数：

function appendPlay(index, content) {
    $('.play').eq(index).find('p').after(content);        
}

appendPlay(2, '<p>HTML to be inserted</p>');

jsFiddle

Answer 3

请尝试使用

var element = $('.play div p');
var item = '<p>HTML to be inserted</p>'
$(element).parent().append(item);

编辑自

var element = $('.play div');
var item = '<p>HTML to be inserted</p>'
$(element).append(item);

Answer 4

您可以使用下面的链接。（我在评论后编辑了代码）

您应该编写如下代码；

var selector = ".play",
    text = "<p>HTML to be inserted</p>";
$(selector + " div p").eq(1).after(text);

http://jsbin.com/esesul/5/

Answer 5

好吧，我想这会起作用：

$(item).appendTo($(elements));

但更好的解决方案是使用：

$('.play').find('p').after(item);