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，任何包含标题"测试标题2"的部分 - 隐藏该特定的测试行div。这就是我试图与jQuery一起做的事情，但到目前为止还没有运气。

Answer 1

是这样：

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

希望这会有所帮助。循环浏览所有h4元素，检查Test Heading 2，获取与test-row类的父div并隐藏。

编辑：使用map功能

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

$(function () {
   $("#section h4").each(function(){
	   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">
	<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>

Answer 3

在这里您可以使用解决方案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-rowdiv并检查内容，如果匹配，请隐藏Div。

希望这对您有帮助。

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 TagName

的第一次方法

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

使用class

的H4 tagname第二种方法

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

我们可以做很多方法