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，任何包含标题的部分＆＃34;测试标题2＆＃34; - 隐藏特定的测试行div。这就是我尝试用jQuery做的事情，但到目前为止还没有运气。

Answer 1

希望这会有所帮助。循环遍历所有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 2

它是这样的：

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

您可以使用解决方案https://jsfiddle.net/enm7sw0f/

＆＃13;

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

＆＃13;

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

＆＃13;

遍历所有.test-row div并检查内容，如果匹配则隐藏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标记名

的第一种方法

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

使用h4标记名和类

的第二种方法

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

我们可以做很多方法

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

4 个答案: