Get Div aus div Liste mit bestimmten Klasse

Question

Ich habe listdiv und wollen div erhalten, wenn die angegebene Klasse wie state-expanded enthalten. Zum Beispiel habe ich zwei verschiedene divs bekam:

<div class="row-popular state-expanded no-sibling-group"> 
    <span class="cell cell-id-name" style="flex: 1 1 63px;"> 
     <span>TEST</span> 
    </span> 
</div> 

<div class="row-popular state-collapsed no-sibling-group"> 
    <span class="cell cell-id-name" style="flex: 1 1 63px;"> 
     <span>OTHER</span> 
    </span> 
</div> 

Erste div Zustand state-expanded und zweiten state-collapsed haben. Ich möchte einen Wert von span erhalten, wobei Klasse in divstate-expanded ist.

Diese list Erklärung:

var allDivs = document.getElementsByTagName('div'); 

In Beispiel wie ich oben schreiben, sollten Sie Wert zurück TEST. Bitte nur JavaScript - nicht jquery usw.

Irgendeine Idee, wie es geht?

Answer 1

Sie können querySelectorAll verwenden, um alle divs auszuwählen und dann jeweils überprüfen, um zu sehen, ob es Klasse DEMO

var divs = document.querySelectorAll('div'); 
for (var i = 0; i < divs.length; i++) { 
    if (divs[i].getAttribute('class').includes('state-expanded')) { 
    console.log(divs[i].querySelector('span').innerHTML); 
    } 
} 

Bearbeiten beinhaltet: auch wenn Sie Kind Text dieser letzten Spanne ändern möchten, können Sie es wie folgt Demo tun

Answer 2

können Sie verwenden

document.getElementsByClassName('state-expanded') mit Javascript und wenn Sie jQuery verwenden.

$('.state-expanded')

Answer 3

dies versuchen - var neededDiv = document.getElementsByClassName('state-expanded')[0] oder Sie können auch querySelector wie folgt verwenden:

var neededDiv = document.querySelector('.state-expanded'); 

oder

var neededDiv = document.querySelector('.state-expanded span span'); 

wenn Sie Spanne erhalten müssen verschachtelt mit 'TEST' Code darin. (Entsprechend Ihrem Beispiel)

Answer 4

Hier ist eine andere Antwort.

var data = document.getElementsByClassName('state-expanded')[0]; 
var data1 = data.getElementsByTagName('span')[1].innerHTML; 

console.log(data1); 

Ausgang: TEST

Was wird es geschehen ist, wird es den ‚state-erweitert‘ div in ihm dann in der zweiten Linie sind wir immer die zweite Spanne Wert (innerHTML- Zuerst in Datenvariable erhalten) so wird es TEST zurückgeben. Hier

ist eine Geige: https://jsfiddle.net/9p9ygd01

Answer 5

Versuchen mit diesem Code unten ...

$(document).ready(function(){ 
 
    var $element = $('.state-expanded span span').html(); 
 
    alert($element); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="row-popular state-expanded no-sibling-group"> 
 
    <span class="cell cell-id-name" style="flex: 1 1 63px;"> 
 
     <span>TEST</span> 
 
    </span> 
 
</div> 
 

 
<div class="row-popular state-collapsed no-sibling-group"> 
 
    <span class="cell cell-id-name" style="flex: 1 1 63px;"> 
 
     <span>OTHER</span> 
 
    </span> 
 
</div>

Answer 6

Sie querySelectorAll wie verwenden:

var txt = document.querySelectorAll('div.state-expanded span span')[0].textContent; 

querySelectorAll kehrt das span-Element in einer Spanne enthalten sind, die mit der Klasse Stand erweitert in einem div enthalten ist.

querySelectorAll gibt eine NodeList zurück, aber da es in Ihrem Fall nur ein Element gibt, können Sie das erste nehmen (zB: [0]).

Für den darin enthaltenen Text können Sie das Attribut textContent verwenden.

Wenn Sie stattdessen mit dem Fahrrad müssen auf allen erhaltenen Ergebnisse mit querySelectorAll Sie benötigen NodeList zu Array konvertieren und als verwenden die forEach Funktion wie:

[].slice.call(document.querySelectorAll('div.state-expanded span span')).forEach(function(currValue, index) { 
    alert(currValue.textContent); 
}); 

window.onload = function() { 
 
    var txt = document.querySelectorAll('div.state-expanded span span')[0].textContent; 
 
    document.body.innerHTML += '<br>Result: ' + txt; 
 

 
    [].slice.call(document.querySelectorAll('div.state-expanded span span')).forEach(function(currValue, index) { 
 
    document.body.innerHTML += '<br>Result in forEach loop: index=' + index + ' textContent=' + currValue.textContent; 
 
    }); 
 
};

<div class="row-popular state-expanded no-sibling-group"> 
 
    <span class="cell cell-id-name" style="flex: 1 1 63px;"> 
 
     <span>TEST</span> 
 
    </span> 
 
</div> 
 

 
<div class="row-popular state-collapsed no-sibling-group"> 
 
    <span class="cell cell-id-name" style="flex: 1 1 63px;"> 
 
     <span>OTHER</span> 
 
    </span> 
 
</div>