Javascript jQuery—具有相同类的多个元素—当且仅当其中包含特定文本时才需要隐藏一个元素

下面是我试图实现的一个示例—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>

测试品目1
测试品目2
测试品目3
测试品目4
测试品目5

---

使用jQuery，任何包含标题“Test heading 2”的部分都会隐藏特定的测试行div。这就是我尝试使用jQuery所做的，但到目前为止没有任何运气。

这里是一个解决方案

$（'.test row'）。每个（函数（）{
if（$（this）.find（'b:contains（“测试标题2”））.length）
$（this.hide（）；
});

测试品目1
测试品目2
测试品目3
测试品目4
测试品目5
希望这有帮助。循环遍历所有
h4
元素，检查
测试标题2
，用class
测试行获取父div并将其隐藏

编辑：使用
映射
功能

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


$（函数（）{
$（“#第h4节”）。每个（函数（）{
if（$（this）.text（）==“测试标题2”）$（this）.closest（“.Test row”）.hide（）；
})
});

测试品目1
测试品目2
测试品目3
测试品目4
测试品目5
是这样的：

//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();

你的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.text-capitalize:contains('Test Heading')").hide();
});

我们可以做的有很多方法
也包括您迄今为止所做的jQuery代码。我下次会记得这样做。虽然只使用代码是可以接受的，但最好解释为什么代码回答了这个问题。
$(document).ready(function(){
  $("h4.text-capitalize:contains('Test Heading')").hide();
});