I have multiple divs with the same structure as follows, I need to check for a text within the child nodes on each main div tag
<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>
In this case I'm selecting the main div with document.getElementsByClassName("s4-wpcell-plain")
from there I need to check for the text "There are no items to show" and hide the corresponding main div.
I have tried to use
document.getElementsByClassName("s4-wpcell-plain").getElementsByTagName("*")
and after this, I will scan on each element on innerText
but it is not getting the elements, any help would be appreciated.
innerText
returns text content of all of its nested childrens
try:
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';
}
}
So here are the things you may follow,
1 - Get the list of elements with document.getElementsByTagName
2 - You can use iterate over, to filter out with the innerText
&& ClassName
for each element
CODE:
// 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] */
}
}
`
I wasn't sure if you wanted .s4-wpcell-plain
to disappear or the element that has the text so I wrote code for both objectives and commented out the part that hides .s4-wpcell-plain
.
Trying to find a text in DOM is inefficient, you need to use whatever this widget uses and I can assure you it isn't the text it generates. The pattern looks like if there's no items to show the message would be in a div with the className of:
.ms-srch-result-noResults
I don't know how your widget works so I'm assuming that whenever there's no items to show then it creates:
<div class="ms-srch-result-noResults">There are no items to show. </div>
The Demo:
Collects all .ms-srch-result-noResults
into a NodeList with document.querySelectorAll()
Makes that NodeList into an array with Array.from()
Runs the array thru forEach()
array method.
On each .ms-srch-result-noResults
is sets style.display
to none
forEach()
method setup to use closest()
to find .s4-wpcell-plain
and then hide that instead. Details commented in Demo
/* 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.