jQuery的 - 需要隱藏一個當且僅當它包含特定文本

-1

這裏是什麼，我試圖完成一個例子 - - 將HTML與同一類的多個要素：jQuery的 - 需要隱藏一個當且僅當它包含特定文本

<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做的事情，但至今沒有任何運氣。

來源

2017-09-15 Andrew

包括jQuery代碼也，你有完成到目前爲止 –

我會記得下一次做。 – Andrew

在這裏，你去了一個解決方案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股利和檢查的內容，如果匹配，則隱藏股利。

希望這會幫助你。

來源

2017-09-15 16:56:22 Shiladitya

希望這會有所幫助。遍歷所有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>

來源

2017-09-15 16:59:36

是這樣的：

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

來源

2017-09-15 17:04:51

雖然只是代碼是可以接受的，但最好解釋爲什麼代碼可以回答這個問題。 –

你的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(); 
});

這麼多的方法第一種方法，我們可以做

來源

2017-09-15 17:11:50

jQuery的 - 需要隱藏一個當且僅當它包含特定文本

回答

相關問題