如果字符串包含特定文本則隱藏 div

Question

我試圖根據第二個 div 的內容隱藏 2 個單獨的 div（即，如果 P 包含“無”一詞）。

<div class="fusion-text fusion-text-9 fusion-text-no-margin" style="color:#000000;margin-bottom:5px;">
  <p><strong>Twitter :</strong></p>
</div>
<div class="fusion-text fusion-text-10" style="margin-right:60px;" id="twitter-handle">
  <p>None</p>
</div>

我可以使用以下方法隱藏 ID 為 twitter-handle 的 div：

$(document).ready(function () {
   $("#twitter-handle p:contains('None')").parent('div').hide();
});

但是，我似乎無法弄清楚如何使用 class“fusion-text-9”（它在頁面上是唯一的）也隱藏第一個 div。

任何指導將不勝感激！

Answer 1

如果你想要一個普通的 JS 解決方案而不是使用 jQuery 你可以在元素的文本內容上使用match()方法：

 let fusionText = document.querySelectorAll(".fusion-text"); fusionText.forEach(element => { if (element.textContent.match(/None/)) { fusionText.forEach(element => { element.style.display = "none"; }) } });

 <div class="fusion-text fusion-text-9 fusion-text-no-margin" style="color:#000000;margin-bottom:5px;"> <p><strong>Twitter:</strong></p> </div> <div class="fusion-text fusion-text-10" style="margin-right:60px;" id="twitter-handle"> <p>None</p> </div>

延伸閱讀

更多關於match()和textContent()的信息

Answer 2

還要隱藏第一個 div，使用 class“fusion-text-9”...

 $(document).ready(function () { $("#twitter-handle p:contains('None')").parent().parent().hide(); });

 <div class="fusion-text fusion-text-9 fusion-text-no-margin" style="color:#000000;margin-bottom:5px;"> <p><strong>Twitter:</strong></p> </div> <div class="fusion-text fusion-text-10" style="margin-right:60px;" id="twitter-handle"> <p>None</p> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script> </div>

Answer 3

prev方法應該是您要尋找的...

$(document).ready(function () {
    var $found = $("#twitter-handle p:contains('None')").parent('div');
    $found.hide();
    $found.prev().hide();
});

您還可以將選擇器傳遞給prev方法...

$(document).ready(function () {
    var $found = $("#twitter-handle p:contains('None')").parent('div');
    $found.hide();
    $found.prev('.fusion-text-9').hide();
});

Answer 4

只是一個演示，展示如何處理找到的元素並在隱藏它之前尋址父元素（根據選擇器標准）：

 $(document).ready(function () { const psToHide = $("#twitter-handle p:contains('None')"); psToHide.each((i, o)=>{ $(o).closest('div').hide(); }); });

 .extraDivForTheSakeOfBorderAndShowingScaling{ border: solid red 1px; margin-bottom: 1rem; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="extraDivForTheSakeOfBorderAndShowingScaling"> <div class="fusion-text fusion-text-9 fusion-text-no-margin" style="color:#000000;margin-bottom:5px;"> <p><strong>Twitter:</strong></p> </div> <div class="fusion-text fusion-text-10" style="margin-right:60px;" id="twitter-handle"> <p>Containing None</p> <p>Not containing</p> <p>Not containing</p> </div> </div> <div class="extraDivForTheSakeOfBorderAndShowingScaling"> <div class="fusion-text fusion-text-9 fusion-text-no-margin" style="color:#000000;margin-bottom:5px;"> <p><strong>Facebook (and so on..):</strong></p> </div> <div class="fusion-text fusion-text-10" style="margin-right:60px;" id="twitter-handle"> <p>Containing None</p> <p>Not containing</p> <p>Not containing</p> </div> </div>

Answer 5

要使它們都消失，您需要找到一個共同點。

如果您想要隱藏的鄰居 div 位於包含“無”的 div 旁邊，那么您可以通過以下方式簡單地擴展您的 jQuery：

$(document).ready(function () {
 $("#twitter-handle p:contains('None')").parent('div').hide();
 $("#twitter-handle p:contains('None')").parent('div').previousElementSibling.hide();
});

如果另一個組件位於 dom 樹另一側的另一個 div 中，id 建議為它們提供相同的樣式類。 您的代碼可能看起來像這樣：

$(document).ready(function () {
 let nonePTag = $("#twitter-handle p:contains('None')")
 nonePTag.parent('div').hide();
 $(nonePTag.classList[0]+" p:not(:contains('None'))")
});
NOTE: The common class has to be in the index (in my exsample the first) position of all classes.

我希望我能幫助你