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

Question

我正在嘗試隱藏DIV（如果它包含帶有li的ul和特定文本）。

我要抓住的一個問題是它不能是純JavaScript的jQuery。

 <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 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都將被隱藏，而不僅僅是頂部的一個。

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>