[英]Parsing properties from certain nodes in XML using Javascript when the name and the value are in separate XML nodes?
[英]How to find certain text on child nodes using JavaScript when selecting by class name
我有多個具有相同結構的div,如下所示,我需要在每個主div標簽的子節點中檢查文本
<div class="s4-wpcell-plain">
<div class="ms-chrome">
<div class="ms-chrome-title" id="WPWPQ6_ChromeTitle">
<span title="My Content" id="WPTitleWPQ6" class="js-wp-titleCell">
<h2 style="text-align:justify;" class="ms-wp-titleText">Results (0)</h2>
</span>
</div>
<div wpid="50348231-8acb-4794-af32-d481915fc127" haspers="false" id="WPWPQ6" width="100%" class="ms-WPBody ms-WPBorder noindex ms-wpContentDivSpace " allowdelete="false" style="">
<div style="display: none;">
</div>
<div componentid="ctl00_ctl40_g_50348231_8acb_4794_af32_d481915fc127_csr" id="ctl00_ctl40_g_50348231_8acb_4794_af32_d481915fc127_csr">
<div class="containerForStyle">
<ul class="cbs-List">
<div class="ms-srch-result-noResults">There are no items to show. </div>
</ul>
</div>
</div>
</div>
</div>
</div>
在這種情況下,我要從那里選擇帶有document.getElementsByClassName("s4-wpcell-plain")
的主div,我需要檢查文本“沒有要顯示的項目”並隱藏相應的主div。
我嘗試使用
document.getElementsByClassName("s4-wpcell-plain").getElementsByTagName("*")
然后,我將掃描innerText
上的每個元素,但沒有得到這些元素,我們將不勝感激。
innerText
返回其所有嵌套子代的文本內容
嘗試:
var elements = document.getElementsByClassName("s4-wpcell-plain");
for (var i = 0; i < elements.length; i++) {
if (elements[i].innerText.indexOf('There are no items to show') !== -1) {
elements[i].style.display = 'none';
}
}
所以這是您可能會遵循的事情,
1-使用document.getElementsByTagName
獲取元素列表
2-您可以使用iterate over來過濾每個元素的innerText
&& ClassName
碼:
// Get the elements list by ClassName
var allEles = documents.getElementsByTagName("*");
var templateString = 'Something';
var wantedClassName = 'ClassName';
// Iterate over all the elements
for(var key in allEles) {
if( (a[key].className === wantedClassName) && (a[key].innerText) === templateString ) {
/* Do Whatever you want with this element => a[key] */
}
}
`
我不確定您是否要消失.s4-wpcell-plain
或包含文本的元素,所以我為這兩個目標編寫了代碼,並注釋掉了隱藏.s4-wpcell-plain
。
嘗試在DOM中查找文本效率低下,您需要使用此小部件使用的所有內容,並且我可以向您保證它不是它生成的文本。 該模式看起來像是如果沒有項目可顯示消息將在className為以下的div中:
.ms-srch-result-noResults
我不知道您的小部件如何工作,因此我假設只要沒有要顯示的項目,它就會創建:
<div class="ms-srch-result-noResults">There are no items to show. </div>
演示:
使用document.querySelectorAll()
所有.ms-srch-result-noResults
到NodeList中
使用Array.from()
使該NodeList成為數組
通過forEach()
數組方法運行數組。
在每個.ms-srch-result-noResults
上,將style.display
設置為none
forEach()
方法設置,可以使用.s4-wpcell-plain
closest()
查找.s4-wpcell-plain
,然后將其隱藏。 演示中詳細評論
/* Collect all .ms-srch-result-noResults into a NodeList || then convert that NodeList into an array */ var noResults = Array.from(document.querySelectorAll('.ms-srch-result-noResults')); /* Run the array thru forEach() method || hide each .ms-srch-result-noResults */ noResults.forEach(function(v, i) { v.style.display = 'none'; }); /*//Or do the same thing but hide the .s4-wpcell-plain instead noResults.forEach(function(v, i) { var main = v.closest('.s4-wpcell-plain'); main.style.display = 'none'; }); */
<div class="s4-wpcell-plain"> <div class="ms-chrome"> <div class="ms-chrome-title" id="WPWPQ6_ChromeTitle"> <span title="My Content" id="WPTitleWPQ6" class="js-wp-titleCell"> <h2 style="text-align:justify;" class="ms-wp-titleText">Results (0)</h2> </span> </div> <div wpid="50348231-8acb-4794-af32-d481915fc127" haspers="false" id="WPWPQ6" width="100%" class="ms-WPBody ms-WPBorder noindex ms-wpContentDivSpace " allowdelete="false" style=""> <div style="display: none;"> </div> <div componentid="ctl00_ctl40_g_50348231_8acb_4794_af32_d481915fc127_csr" id="ctl00_ctl40_g_50348231_8acb_4794_af32_d481915fc127_csr"> <div class="containerForStyle"> <ul class="cbs-List"> <li class="ms-srch-result-noResults">There are no items to show. </li> </ul> </div> <ul class="cbs-List"> <li class="ms-srch-result-results">There are items to show. </li> <li>ITEM</li> <li>ITEM</li> <li>ITEM</li> <li>ITEM</li> </ul> </div> <ul class="cbs-List"> <li class="ms-srch-result-results">There are items to show. </li> <li>ITEM</li> <li>ITEM</li> <li>ITEM</li> </ul> </div> <ul class="cbs-List"> <li class="ms-srch-result-noResults">There are no items to show. </li> </ul> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.