Vérifier si chaque div a un élément avec une classe spécifique à l'intérieur.

Question

J'ai un arbre de div éléments avec le même class mais différent id comme on peut le voir ci-dessous :

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

Je dois vérifier quelle classe existe dans chacun de ces divs et l'afficher sur la console. Pour cela, j'ai créé le code suivant :

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

});

Je m'attendais à obtenir les résultats suivants, comme ceci :

Je suis sur div : result_0 Le résultat est un succès.

Je suis sur div : result_1 Le résultat est un avertissement

Je suis sur div : result_2 Le résultat est le danger

Mais j'obtiens les résultats suivants :

Je suis sur div : result_0 Le résultat est un succès Le résultat est un avertissement Le résultat est un danger résultat est un danger

Je suis sur div : result_1 Le résultat est le succès Le résultat est l'avertissement Le résultat est un danger

Je suis sur div : result_2 Le résultat est un succès Le résultat est un avertissement Le résultat est un danger résultat est un danger

Comment puis-je résoudre ce problème ?

Answer 1

Une solution efficace consiste à utiliser .children car vous devez vérifier si span enfants de each div a un certain class .

children obtient les enfants de chaque élément dans l'ensemble des éléments correspondants, éventuellement filtrés par un sélecteur.

$( ".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

Tu étais proche.

Le problème est que le .has() méthode retournera toujours un Objet jQuery même si un élément n'est pas sélectionné. Comme l'élément États de la documentation jQuery le .has() réduira l'ensemble des éléments correspondants à ceux qui ont un descendant correspondant au sélecteur ou à l'élément DOM.

Cela signifie que vos déclarations conditionnelles étaient toujours vraies, c'est pourquoi le message a été enregistré, que des éléments aient été trouvés ou non.

Pour vérifier si des éléments sont renvoyés par l'objet jQuery, vérifiez l'attribut .length de l'objet jQuery dans vos déclarations conditionnelles. Ce faisant, la valeur sera 0 lorsqu'un élément n'est pas trouvé.

Votre code mis à jour serait :

$(".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

Vous pourriez aller dans l'autre sens et cibler spécifiquement chacune des classes, puis trouver l'identifiant du conteneur parent. Notez que j'ai ajouté un autre div de succès en bas pour démontrer que tous les div de succès donnent l'ID du parent, puis l'avertissement et enfin le danger.

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

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

Answer 4

Vous pourriez utiliser .find() (vérification de la longueur du résultat de la recherche) et utiliser la boucle pour le rendre plus élégant et élastique pour d'autres changements.

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