從具有特定類的div列表中獲取div

Question

我有div list ，並希望在包含像state-expanded這樣的指定類時得到div 。 例如，我有兩個不同的divs ：

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

第一個div有狀態state-expanded和第二個state-collapsed 。 我想要得到的值span ，其中類div是state-expanded 。

這份list聲明：

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

在我上面寫的示例中，它應該返回值TEST 。 請只JavaScript - 而不是jquery等。

知道怎么弄它？

Answer 1

您可以使用querySelectorAll選擇所有div，然后檢查每個div以查看它是否包含類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);
  }
}

編輯：如果你想更改最后一個跨欄孩子的文本，你可以像這個演示一樣

Answer 2

您可以使用

使用javascript並使用jQuery的document.getElementsByClassName('state-expanded') 。

$('.state-expanded')

Answer 3

試試這個 - var neededDiv = document.getElementsByClassName('state-expanded')[0]或者你也可以像這樣使用querySelector ：

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

要么

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

如果您需要使用'TEST'代碼獲得嵌套跨度。（根據您的示例）

Answer 4

這是另一個答案。

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

console.log(data1);

輸出： TEST

它將要做的是，首先在數據變量中它將獲得“狀態擴展”div，然后在第二行中我們獲得第二個值范圍（innerHTML），因此它將返回TEST。

這是一個小提琴： https ： //jsfiddle.net/9p9ygd01

Answer 5

嘗試使用以下代碼...

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

您可以使用querySelectorAll ：

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

querySelectorAll將返回包含在帶有state-expanded類的div中的span中的span元素。

querySelectorAll返回一個NodeList，但因為在你的情況下只有一個元素你可以獲取第一個元素（即：[0]）。

對於包含在其中的文本，您可以使用textContent屬性。

如果您需要循環使用querySelectorAll獲得的所有結果，您需要將NodeList轉換為數組，而不是使用forEach函數，如：

[].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>