按类名选择时如何使用JavaScript在子节点上查找某些文本

Question

我有多个具有相同结构的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.&nbsp;</div>     
            </ul>
          </div>
        </div>
    </div>
  </div>
</div>

在这种情况下，我要从那里选择带有document.getElementsByClassName("s4-wpcell-plain")的主div，我需要检查文本“没有要显示的项目”并隐藏相应的主div。

我尝试使用

document.getElementsByClassName("s4-wpcell-plain").getElementsByTagName("*")

然后，我将扫描innerText上的每个元素，但没有得到这些元素，我们将不胜感激。

Answer 1

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';
    }   
}

Answer 2

所以这是您可能会遵循的事情，

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] */
    }
}

`

Answer 3

我不确定您是否要消失.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.&nbsp;</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.&nbsp;</li> </ul> </div> <ul class="cbs-List"> <li class="ms-srch-result-results">There are items to show.&nbsp;</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.&nbsp;</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.&nbsp;</li> </ul> </div> </div>