jquery 创建新的子项，或更新现有的子项

Question

如果我有这个html

<div>
  <p>1</p>
</div>

<div>
  <p>1</p>
  <p>2</p>
</div>

还有这个 jquery

$('div').each(function () {
    $(this).find('p').eq(1).html('test');
});

我明白了

<div>
  <p>1</p>
</div>

<div>
  <p>1</p>
  <p>test</p>
</div>

我应该使用什么 jquery 来代替它？

<div>
  <p>1</p>
  <p>test</p>
</div>

<div>
  <p>1</p>
  <p>test</p>
</div>

第一个 div 上的 eq(1) 没有匹配项，因此它会跳过它。如何在不存在子项的情况下添加子项，或者如果存在子项则更新它，而无需将 jquery 拆分为多个语句？

Answer 1

如果您的<div>元素最多包含两个段落，你可以这样做:

$("div").each(function() {
    var $this = $(this);
    $this.find("p").add($("<p>")).eq(1).html("test").appendTo($this);
});

如果有两个以上的段落，事情会变得更加复杂，您必须使用 insertAfter()而不是appendTo()将新元素添加到 DOM:

$("div").each(function() {
    var $this = $(this);
    $this.find("p").add($("<p>")).eq(1).html("test")
         .insertAfter($this.find("p").eq(0));
});

您可以在 this fiddle 中看到结果.