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>
  <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')
    }
});

http://jsfiddle.net/geBXF/

Answer 2

如果您的<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中看到结果。

Answer 3

为了保持关注点分离，这里有一个jQuery函数，可以找到现有元素或创建一个新元素。

所以只需在任何地方包含这个jQuery：

$.fn.upsert = function(selector, htmlString) {
  // upsert - find or create new element
  // find based on css selector     https://api.jquery.com/category/selectors/
  // create based on jQuery()       http://api.jquery.com/jquery/#jQuery2
  var $el = $(this).find(".message");
  if ($el.length == 0) {
    // didn't exist, create and add to caller
    $el = $("<span class='message'></span>");
    $(this).append($el);
  }

  return $el;
}; 

然后你可以这样使用：

$("input[name='choice']").click(function(){
  var $el = $(this).closest("form").upsert(".message", "<span class='message'></span>");
  // guaranteed to have element - update if we want
  $el.html("You've chosen "+this.value)
})

理想情况下，简单地传入选择器并让jQuery自动创建一个与该选择器匹配的元素会很好，但它似乎并不像creating an element那样轻量级的工具基于CSS Selector语法（基于Question 1＆amp; Question 2）。

某些进一步的增强功能可能会为DOM insertion提供更精细的控制，而不是始终使用.append()。

Demo in jsFiddle | Stack Snippets中的演示：

＆＃13;

＆＃13;

$.fn.upsert = function(selector, htmlString) {
  // upsert - find or create new element
  // find based on css selector   	https://api.jquery.com/category/selectors/
  // create based on jQuery()       http://api.jquery.com/jquery/#jQuery2
  var $el = $(this).find(".message");
  if ($el.length == 0) {
    // didn't exist, create and add to caller
    $el = $("<span class='message'></span>");
    $(this).append($el);
  }

  return $el;
}; 

$("input[name='choice']").click(function(){
  var $el = $(this).closest("form").upsert(".message", "<span class='message'></span>");
  // guaranteed to have element - update if we want
  $el.html("You've chosen "+this.value)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="">
  <div>
    <input type="radio" id="ca" name="choice" value="A" /><label for='ca'>A</label>
    <input type="radio" id="cb" name="choice" value="B" /><label for='cb'>B</label>
    <input type="radio" id="cc" name="choice" value="C" /><label for='cc'>C</label>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;