Question

如果DIV包含带有li且带有特定文本的ul，我将尝试隐藏它。

我要抓住的一个问题是它不能是纯JavaScript的jQuery。

Statement -> WhileStatement

Answer 1

您可以使用https://www.w3schools.com/jsref/met_document_queryselector.asp。如果您知道如何为jQuery编写CSS选择器，那就可以在不使用jQuery的情况下使用它。

$('div > ul > li')变为document.querySelectorAll("div > ul > li");

当然：

我没有选择div，而是li。
我没有检查文本是否包含在li中。

那我们该怎么做呢？我们无法使用CSS选择器来做到这一点，因此我们将使用普通的JS。我们将仅过滤包含所需文本的li元素，然后获取其祖父母节点（即div）。

// Get the li's in an array
let lis = Array.from(document.querySelectorAll("div > ul > li"));

// only keep the ones with the proper text
lis = lis.filter(item => item.text.match(/The text that you want to match/));

// get the div's from the li's
let divs = lis.map(item => item.parentNode.parentNode);

// do whatever you want to these divs.
...

与直接在div上调用.innerHTML相比，此方法更具弹性，因为在这种情况下，您可能最终会在其innerHTML中某个地方随机选择带有所需文本的div。例如：

<div class="uc-events">
  <h3 style="text-align: center;">Upcoming Events</h3>
  <ul class="upcoming_events graphical_theme">
    <li>No upcoming events are scheduled </li>
  </ul>
</div>

<div class="uc-events">
  <h3 style="text-align: center;">Upcoming Events</h3>
  <ul class="upcoming_events graphical_theme">
    <!--<li>No upcoming events are scheduled </li>-->
    <li>Event 1: 11/10 at 08:00</li>
  </ul>
</div>

<div class="uc-events">
  <h3 style="text-align: center;">Upcoming Events</h3>
  <ul class="upcoming_events graphical_theme">
    <li>Event 2: 12/10 at 08:00</li>
  </ul>
  <span>After that, you'll find out that No upcoming events are scheduled.</span>
</div>

在其他答案中使用.innerHTML方法时，所有3个div都将被隐藏，而不仅仅是顶部div。

Answer 2

您可以执行以下操作。获取所有div并找到包含所需文本的div并将其隐藏。如果您想对以下代码进行澄清，请告诉我。

document.getElementById("hide").addEventListener("click", ()=>{
    let divs = document.getElementsByTagName("div");
    for(let i = 0;i<divs.length; i++){
      if(divs[i].innerHTML.includes("No upcoming events are scheduled")){
        divs[i].style.display = "none";
      }
    }
});

<div class="uc-events">
<h3 style="text-align: center;">Upcoming Events</h3>
<ul class="upcoming_events graphical_theme">
					<li>
			No upcoming events are scheduled		</li>
		</ul>

</div>

<button id="hide">hide divs</button>

Answer 3

这是在嵌套循环中使用getElementsByTagName的幼稚解决方案：

const target = "scheduled";

for (const d of document.getElementsByTagName("div")) {
  for (const ul of d.getElementsByTagName("ul")) {
    for (const l of ul.getElementsByTagName("li")) {
      if (l.innerText.includes(target)) {
        d.style.display = "none";
      }
    }
  }
}

<div class="uc-events">
  <h3 style="text-align: center;">Upcoming Events</h3>
  <ul class="upcoming_events graphical_theme">
    <li>
      No upcoming events are scheduled </li>
  </ul>
</div>

Answer 4

var targetStr = "No upcoming events are scheduled";
var divs = document.getElementsByTagName("div");

for(var i = 0; i < divs.length; i++){
  var divsChildren = divs[i].children;
  for(var j = 0; j < divsChildren.length; j++){
    if(divsChildren[j].tagName == "UL"){
      var ulChildren = divsChildren[j].children;
      for(var k = 0; k < ulChildren.length; k++){
        if(ulChildren[k].tagName == "LI"){
          if(ulChildren[k].textContent.trim() === targetStr){
            divs[i].style.display = "none";
          }
        }
      }
    }
  }
}

<div id="num">first div</div>
<div class="uc-events">
<h3 style="text-align: center;">Upcoming Events</h3>
<ul class="upcoming_events graphical_theme">
					<li>
			No upcoming events are scheduled		</li>
		</ul>

</div>
<div id="num">third div</div>

Answer 5

在下面的代码段中检查所有div元素，并检查它们的innerHTML是否包含给定的文本。如果您还想检查ul和li是否存在，只需添加其他条件即可。

const divList = Array.prototype.slice.call(document.getElementsByTagName('DIV'));
console.log(divList);
divList.forEach((el) => {
  if (el.innerHTML.includes('No upcoming events are scheduled')) {
    el.style.display = 'none';
  }
})

<div class="uc-events">
  <h3 style="text-align: center;">Upcoming Events</h3>
  <ul class="upcoming_events graphical_theme">
    <li>No upcoming events are scheduled </li>
  </ul>
</div>

<div class="uc-events">
  <h3 style="text-align: center;">Upcoming Events</h3>
  <ul class="upcoming_events graphical_theme">
    <li>No upcoming events are scheduled </li>
  </ul>
</div>

<div class="uc-events">
  <h3 style="text-align: center;">Upcoming Events</h3>
  <ul class="upcoming_events graphical_theme">
    <li>No upcoming events are schedu </li>
  </ul>
</div>

Answer 6

好的，我刚刚编辑了帖子，这是一种简单的方法，如果使用javascript里面没有文本，则可以隐藏ur LI

 $('.testclass:empty').text("No News!");

<div class="testclass"></div>
    <div class="testclass">Div  with news</div>
    <div class="testclass"></div>
    
    
    
    <div class="uc-events">
      <h3 style="text-align: center;">Upcoming Events</h3>
      <ul class="testclass">
        <li><div class="testclass">IF NEWS DISPLAY DIV!</div></li>
      </ul>
    </div>

使用具有特定文字的li的ul隐藏div

6 个答案: