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>

нет совпадения для eq(1) в первом div, поэтому он просто пропускает его. как я могу добавить дочерний элемент, если его нет, или обновить его, если он существует, без необходимости разбивать 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));
});

Вы можете увидеть результаты в этой скрипке .

Answer 2

Самый простой способ, который я нашел, это показать, что кто-то другой может предложить меньшее решение

<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 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 создать элемент, который автоматически соответствует этому селектору, но, похоже, нетлегковесное транспортное средство для создания элемента на основе синтаксиса селектора CSS (на основе Вопрос 1 & Вопрос 2 ).

Некоторое дальнейшееУсовершенствования могут обеспечить более точно настроенный элемент управления для DOM-вставки вместо того, чтобы просто всегда использовать .append().

Демонстрация в jsFiddle |Демонстрация в фрагментах стека:

$.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)
});

<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>