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

如果我有这个html

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

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

我明白了

<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上没有与等式（1）匹配的项，因此它只是跳过它。如果不存在子查询，如何添加子查询？如果存在子查询，如何更新子查询，而不必将jquery拆分为多个语句？

我发现的最简单的方法是，让其他人使用更小的解决方案

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

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

$('div').each(function () {
    var elm= $(this).find('p').eq(1);
    if(elm.length==0)
    {
        $(this).find('p').after('test');
    }
    else
    {
        elm.html('test')
    }
});

一,

一,

二,

$（'div'）。每个（函数（）{
var elm=$（this.find（'p'）.eq（1）；
如果（elm.length==0）
{
$（this.find（'p'）。在（'test'）之后；
}
其他的
{
html（'test'）
}
});

如果

元素最多包含两段，则可以执行以下操作：

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

$（“div”）。每个（函数（）{
var$this=$（this）；
$this.find（“p”）.add（$（“”））.eq（1.html（“test”）.appendTo（$this）；
});

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

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

$（“div”）。每个（函数（）{
var$this=$（this）；
$this.find（“p”）.add（$（“”）.eq（1）.html（“测试”）
.insertAfter（$this.find（“p”）.eq（0））；
});

---

您可以在中看到结果。

为了保持关注点的分离，这里有一个jQuery函数，它将定位现有元素或创建新元素

因此，只需将此jQuery包含在任意位置：

$.fn.upsert=函数（选择器，htmlString）{
//upsert-查找或创建新元素
//基于css选择器的查找https://api.jquery.com/category/selectors/
//基于jQuery（）创建http://api.jquery.com/jquery/#jQuery2
var$el=$（this.find（“.message”）；
如果（$el.length==0）{
//不存在，创建并添加到调用方
$el=$（“”）；
美元（本）。追加（$el）；
}
返回$el；
}; 

然后你可以这样使用：

$（“输入[name='choice']）。单击（函数（）{
var$el=$（this）.closest（“form”）.upsert（“.message”，”）；
//保证有元素更新，如果我们想要的话
$el.html（“您已选择”+this.value）
})

理想情况下，只需传入一个选择器并让jQuery自动创建一个与该选择器匹配的元素就可以了，但似乎没有一个基于CSS选择器语法（基于&）的轻量级工具

一些进一步的增强可能会为提供更精细的控制，而不是总是使用

|堆栈片段中的演示：

$.fn.upsert=函数（选择器，htmlString）{
//upsert-查找或创建新元素
//基于css选择器的查找https://api.jquery.com/category/selectors/
//基于jQuery（）创建http://api.jquery.com/jquery/#jQuery2
var$el=$（this.find（“.message”）；
如果（$el.length==0）{
//不存在，创建并添加到调用方
$el=$（“”）；
美元（本）。追加（$el）；
}
返回$el；
}; 
$（“输入[name='choice']）。单击（函数（）{
var$el=$（this）.closest（“form”）.upsert（“.message”，”）；
//保证有元素更新，如果我们想要的话
$el.html（“您已选择”+this.value）
});

A.
B
C
不必将jquery拆分为多个语句，您所说的
是什么意思？如果
语句被禁止，是否

语句被禁止？我的理解是，如果它做同样的事情并且容易理解，那么1行代码通常比5行代码好。可能重复的是，这也是我基本上想到的。我希望比我更熟悉jquery的人能知道一个更简洁的语法。我可以问一下，为什么要将$（this）更改为$this？@Joey，省去一个调用

$（）

，这样代码会稍微快一点。这种做法通常称为缓存$（This）。

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