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

我有list的div，並且在包含指定的類如state-expanded時想要得到div。比如我有兩個不同的divs：從特定類的div列表中獲取div

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

任何想法如何得到它？

來源

2016-04-27 czArek

您可以使用querySelectorAll選擇所有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); 
    } 
}

編輯：另外，如果你想改變的最後一個跨距孩子的文本，你可以做這樣的Demo

來源

2016-04-27 12:21:41

您可以使用

document.getElementsByClassName('state-expanded')用JavaScript ，如果你正在使用jQuery。

$('.state-expanded')

來源

2016-04-27 12:19:13 fdfey

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

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

或

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

，如果你需要得到嵌套跨度 'TEST' 代碼（根據你的例子）

來源

2016-04-27 12:20:35

這是另一個答案。

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

console.log(data1);

輸出：TEST

什麼就會做的是，首先在數據變量會得到「國家擴大」 DIV它，然後在第二行中，我們越來越有價值的第二範圍（innerHTML的）所以它會返回測試。

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

來源

2016-04-27 12:26:58

嘗試用這個下面的代碼...

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

來源

2016-04-27 12:27:47

你可以使用querySelectorAll像：

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

querySelectorAll將返回包含在一個div類國家擴大包含在跨度span元素。

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

對於包含在裏面的文字，您可以使用textContent屬性。

相反，如果你需要循環使用querySelectorAll需要節點列表轉換爲數組，不是使用所獲得的所有結果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>

來源

2016-04-27 12:28:19 gaetanoM

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

回答

相關問題