Question

我有一个div元素的树，其class但id不同，如下所示：

<div class="resultsAnalitics" id="result_0">
  <span class="successResults">Success</span>
</div>

<div class="resultsAnalitics" id="result_1">
  <span class="warningResults">Warning</span>
</div>

<div class="resultsAnalitics" id="result_2">
  <span class="dangerResults">Danger</span>
</div>

我必须检查每个div中存在哪个类并在控制台上显示。为此，我创建了以下代码：

$( ".resultsAnalitics" ).each(function( index ) {
var current = $(this).attr('id');

console.log("I'm on div: " + current);

if($(this).has('.successResults')){
console.log('The results is success');
}

if($(this).has('.warningResults')){
console.log('The results is warning');
}

if($(this).has('.dangerResults')){
console.log('The results is danger');
}


});

我希望得到以下结果：

我在div：result_0结果是成功的

我在div：result_1结果是警告

我在div：result_2结果是危险

但是我得到了以下结果：

我在div：result_0结果是成功结果是警告   结果是危险

我在div：result_1结果是成功结果是警告   结果是危险

我在div：result_2结果是成功结果是警告   结果是危险

我如何解决这个问题？

Answer 1

一种效率解决方案是使用.children方法，因为您必须检查span div的each个孩子是否有一个class。

children方法获取匹配元素集中每个元素的子元素，可选择由选择器进行过滤。

$( ".resultsAnalitics" ).each(function( ) {
var current = $(this).attr('id');

console.log("I'm on div: " + current);

if($(this).children('.successResults').length){
console.log('The results is success');
}

if($(this).children('.warningResults').length){
console.log('The results is warning');
}

if($(this).children('.dangerResults').length){
console.log('The results is danger');
}


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="resultsAnalitics" id="result_0">
<span class="successResults">Success</span>
</div>

<div class="resultsAnalitics" id="result_1">
<span class="warningResults">Warning</span>
</div>

<div class="resultsAnalitics" id="result_2">
<span class="dangerResults">Danger</span>
</div>

Answer 2

你很亲密。

问题是即使未选择元素，.has() method仍会返回jQuery object。作为相关的jQuery documentation states，.has()方法将“将匹配元素的集合减少为具有与选择器或DOM元素匹配的后代的元素”。

这意味着您的条件语句始终为true，这就是无论是否找到任何元素，都会记录消息的原因。

要检查是否从jQuery对象返回任何元素，请检查条件语句中jQuery对象的.length属性。这样，当找不到元素时，该值将为0。

您的更新代码将是：

$(".resultsAnalitics").each(function(index) {
  console.log("I'm on div: " + this.id);

  if ($(this).has('.successResults').length) {
    console.log('The results is success');
  }

  if ($(this).has('.warningResults').length) {
    console.log('The results is warning');
  }

  if ($(this).has('.dangerResults').length) {
    console.log('The results is danger');
  }
});

Answer 3

您可以采用另一种方式并专门定位每个类，然后找到父容器的ID。请注意，我在底部添加了另一个成功div，以证明所有成功div都会提供父ID，然后是警告，然后是危险。

＆＃13;

$(".successResults" ).each(function(){
var parent = $(this).parent().attr('id');
  console.log("I'm on div: " + parent + ' - The results is success');
});

$(".warningResults" ).each(function(){
var parent = $(this).parent().attr('id');
  console.log("I'm on div: " + parent + ' - The results is warning');
});

$(".dangerResults" ).each(function(){
var parent = $(this).parent().attr('id');
  console.log("I'm on div: " + parent + ' - The results is danger');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="resultsAnalitics" id="result_0">
<span class="successResults">Success</span>
</div>

<div class="resultsAnalitics" id="result_1">
<span class="warningResults">Warning</span>
</div>

<div class="resultsAnalitics" id="result_2">
<span class="dangerResults">Danger</span>
</div>

<div class="resultsAnalitics" id="result_3">
<span class="successResults">Success</span>
</div>

＆＃13;

Answer 4

您可以使用.find()（检查搜索结果的长度）并使用循环使其更加优雅和有弹性以进行进一步更改。

http://codepen.io/themeler/pen/mRgKLP

$( ".resultsAnalitics" ).each(function( index ) {
    var $this = $(this),
        current = $this.attr('id'),
        states = [
            {
                name: '.successResults',
                msg: 'The results is success'
            },
            {
                name: '.warningResults',
                msg: 'The results is warning'
            },
            {
                name: '.dangerResults',
                msg: 'The results is danger'
            }
        ];

    for (var i = 0; i < states.length; i++) {
        if ($this.find(states[i].name).length) console.log("I'm on div: " + current, states[i].msg)
    }

});

Answer 5

// Grabs all classes that end with Results within resultsAnalitics     
var results = $(".resultsAnalitics span[class$='Results']");

// loop through each, grabbing parent id and innerHTML
results.each(function(idx, node) {
    console.log("I'm on div:", node.parentNode.id, "- Result are:", node.innerHTML);
})

Answer 6

你总是可以使用jQuery＆＃34; find＆＃34;检查特定元素中特定元素的方法。它返回jQuery对象。使用此对象，我们可以使用＆＃39; length＆＃39;进一步检查元素的数量。

<div class="resultsAnalitics" id="result_0">
  <span class="successResults">Success</span>
</div>

<div class="resultsAnalitics" id="result_1">
  <span class="warningResults">Warning</span>
</div>

<div class="resultsAnalitics" id="result_2">
  <span class="dangerResults">Danger</span>
</div>

<script>
$( ".resultsAnalitics" ).each(function( index ) {
var current = $(this).attr('id');

console.log("I'm on div: " + current);

if($(this).find('.successResults').length){
console.log('The results is success');
}

if($(this).find('.warningResults').length){
console.log('The results is warning');
}

if($(this).find('.dangerResults').length){
console.log('The results is danger');
}


});
</script>

检查每个div是否包含一个包含特定类的元素

6 个答案: