jQuery的 - 需要隐藏一个当且仅当它包含特定文本

Question

这里是什么，我试图完成一个例子 - - 将HTML与同一类的多个要素：

<div id="section"> 
    <div class="test-row"> 
     <div class="row-copy-options"> 
      <h4 class="text-capitalize"><b>Test Heading 1</b></h4> 
     </div> 
    </div> 
    <div class="test-row"> 
     <div class="row-copy-options"> 
      <h4 class="text-capitalize"><b>Test Heading 2</b></h4> 
     </div> 
    </div> 
    <div class="test-row"> 
     <div class="row-copy-options"> 
      <h4 class="text-capitalize"><b>Test Heading 3</b></h4> 
     </div> 
    </div> 
    <div class="test-row"> 
     <div class="row-copy-options"> 
      <h4 class="text-capitalize"><b>Test Heading 4</b></h4> 
     </div> 
    </div> 
    <div class="test-row"> 
     <div class="row-copy-options"> 
      <h4 class="text-capitalize"><b>Test Heading 5</b></h4> 
     </div> 
    </div> 
</div> 

使用jQuery，任何包含标题“Test Heading 2”的部分 - 隐藏该特定的测试行div。这就是我试图用jQuery做的事情，但至今没有任何运气。

Answer 1

在这里，你去了一个解决方案https://jsfiddle.net/enm7sw0f/

$('.test-row').each(function(){ 
 
    if($(this).find('b:contains("Test Heading 2")').length) 
 
    $(this).hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="section"> 
 
    <div class="test-row"> 
 
    <div class="row-copy-options"> 
 
     <h4 class="text-capitalize"><b>Test Heading 1</b></h4> 
 
    </div> 
 
    </div> 
 
    <div class="test-row"> 
 
    <div class="row-copy-options"> 
 
     <h4 class="text-capitalize"><b>Test Heading 2</b></h4> 
 
    </div> 
 
    </div> 
 
    <div class="test-row"> 
 
    <div class="row-copy-options"> 
 
     <h4 class="text-capitalize"><b>Test Heading 3</b></h4> 
 
    </div> 
 
    </div> 
 
    <div class="test-row"> 
 
    <div class="row-copy-options"> 
 
     <h4 class="text-capitalize"><b>Test Heading 4</b></h4> 
 
    </div> 
 
    </div> 
 
    <div class="test-row"> 
 
    <div class="row-copy-options"> 
 
     <h4 class="text-capitalize"><b>Test Heading 5</b></h4> 
 
    </div> 
 
    </div> 
 
</div>

遍历所有.test-row股利和检查的内容，如果匹配，则隐藏股利。

希望这会帮助你。

Answer 2

希望这会有所帮助。遍历所有h4元素，检查Test Heading 2，获得父类div test-row并隐藏它。

编辑：使用map功能

$(function() { 
    $("#section h4").map(function(i,el){ $(el).text() == "Test Heading 2" ? $(el).closest(".test-row").hide() : el }); 
}); 

$(function() { 
 
    $("#section h4").each(function(){ 
 
\t if ($(this).text() == "Test Heading 2") $(this).closest(".test-row").hide(); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div id="section"> 
 
\t <div class="test-row"> 
 
\t \t <div class="row-copy-options"> 
 
\t \t \t <h4 class="text-capitalize"><b>Test Heading 1</b></h4> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="test-row"> 
 
\t \t <div class="row-copy-options"> 
 
\t \t \t <h4 class="text-capitalize"><b>Test Heading 2</b></h4> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="test-row"> 
 
\t \t <div class="row-copy-options"> 
 
\t \t \t <h4 class="text-capitalize"><b>Test Heading 3</b></h4> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="test-row"> 
 
\t \t <div class="row-copy-options"> 
 
\t \t \t <h4 class="text-capitalize"><b>Test Heading 4</b></h4> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="test-row"> 
 
\t \t <div class="row-copy-options"> 
 
\t \t \t <h4 class="text-capitalize"><b>Test Heading 5</b></h4> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 3

是这样的：

//to hide single item 
$("div.row-copy-options:has(h4:contains('Test Heading 1'))").hide(); 

//to hide multiple items 
$("div.row-copy-options:has(h4:contains('Test Heading 1'),h4:contains('Test Heading 2'))").hide(); 

Answer 4

你的HTML

<div id="section"> 
<div class="test-row"> 
<div class="row-copy-options"> 
<h4 class="text-capitalize"><b>Test Heading 1</b></h4> 
</div> 
</div> 
<div class="test-row"> 
<div class="row-copy-options"> 
<h4 class="text-capitalize"><b>Test Heading 2</b></h4> 
</div> 
</div> 
<div class="test-row"> 
<div class="row-copy-options"> 
<h4 class="text-capitalize"><b>Test Heading 3</b></h4> 
</div> 
</div> 
<div class="test-row"> 
<div class="row-copy-options"> 
<h4 class="text-capitalize"><b>Test Heading 4</b></h4> 
</div> 
</div> 
<div class="test-row"> 
<div class="row-copy-options"> 
<h4 class="text-capitalize"><b>Test Heading 5</b></h4> 
</div> 
</div> 
</div> 

使用H4标记名

$(document).ready(function(){ 
    $("h4:contains('Test Heading')").hide(); 
}); 

第二条本办法使用H4标记名带班

$(document).ready(function(){ 
    $("h4.text-capitalize:contains('Test Heading')").hide(); 
}); 

这么多的方法第一种方法，我们可以做