如果字符串包含特定文本则隐藏 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.

我希望我能帮助你