如果字符串包含特定文本，则隐藏 div

Question

我正在尝试根据第二个 div 的内容隐藏两个单独的 div（即，如果 P 包含单词“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>

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

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

但是，我似乎无法弄清楚如何也隐藏第一个 div，class "fusion-text-9 "（它在页面上是唯一的）。

任何指导将不胜感激！

Answer 1

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 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

只是一个演示，展示如何处理找到的元素并在隐藏它之前寻址父元素（根据选择器标准）：

$(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 4

要让它们都消失，你需要找到一个共同点。

如果您要始终隐藏的 neighbour-div 位于包含 'None' 的 div 旁边，那么您只需将 jQuery 扩展为：

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

如果另一个组件位于 dom-tree 另一侧的另一个 div 内，我建议为它们提供相同的样式类。您的代码可能看起来像这样：

$(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.

希望能帮到你

Answer 5

如果您想要普通的 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() and textContent()

如果字符串包含特定文本，则隐藏 div

Hiding div if string contains specific text

html

javascript

css

jquery