Question

我需要在一组“容器”div中搜索“a2”类。如果找到了，什么都不做;如果它丢失了，请添加它。

原始代码：

<div class="container">
  <div class="a1">
    <span class="Label">Status:</span>
    <span class="Text">Active</span>
  </div>
  <div class="a2">
    <span class="Label">Description:</span>
    <span class="Text">2</span>
  </div>   
</div>

</br>
</br>

<div class="container">
  <div class="a1">
    <span class="Label">Status:</span>
    <span class="Text">Active</span>
  </div>
</div>

</br>
</br>

<div class="container">
  <div class="a1">
    <span class="Label">Status:</span>
    <span class="Text">Active</span>
  </div>  
</div>

这是我的剧本：

$('div.container').each(function(){
   if($(this).children('.a2').length == 0){  
      $('<div class="a2"><span class="Label">Description:</span><span  class="Text">0</span></div>').insertAfter('div.a1');    
      return false; 
   }      
});

请在此处查看demo。

问题是脚本在第一个“容器”中插入了“a2”div，这是不需要的。有人能帮我弄清楚我做错了吗？

Answer 1

.insertAfter('div.a1');

在每个div.a1元素后面插入元素。您想要的是将其附加到当前div.container：

.appendTo(this);

另外，不要return false。它将停止整个循环。 if已经保护是否添加。

Answer 2

$('div.container').filter(function(){
     return $('.a2', this).length === 0;
}).append('<div class="a2"><span class="Label">Description:</span><span class="Text">0</span></div>');

或：

$('div.container').not(":has('div.a2')")
                  .append('<div class="a2"><span class="Label">Description:</span><span class="Text">0</span></div>');

http://jsfiddle.net/xGACz/

Answer 3

您可以使用not方法和:has选择器来过滤容器，以便您只拥有那些没有a2元素的容器：

$('div.container').not(':has(> .a2)').append(
  $('<div class="a2"><span class="Label">Description:</span><span  class="Text">0</span></div>')
);

jQuery搜索一组选择器中的特定元素，如果找不到，则添加它

3 个答案: