如何在li> div中查找特定字符串并将其隐藏

Question

我有一个带有li的ul列表，并且在li中有没有类和id的div。 我只想找到li> div，其文字为“ Certificats et forfaits”，并隐藏其旁边的锚标签。 可能吗？

这是我的代码

<ul class="select2-choices">  
    <li class="select2-search-choice">    
        <div>Informatique Électronique</div>    
        <a href="#" class="select2-search-choice-close" tabindex="-1"></a>
    </li>
    <li class="select2-search-choice">   
        <div>Informatique Électronique &gt; Accessoires Informatique</div>
        <a href="#" class="select2-search-choice-close" tabindex="-1"></a>
    </li>
    <li class="select2-search-choice">    
        <div>Mode et Accessoires</div>    
        <a href="#" class="select2-search-choice-close" tabindex="-1"></a>
    </li>
    <li class="select2-search-choice">    
        <div>Certificats et forfaits</div>    
        <a href="#" class="select2-search-choice-close" tabindex="-1"></a>
    </li>
    <li class="select2-search-field">    
        <label for="s2id_autogen3" class="select2-offscreen"></label>    
        <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen3" placeholder="" style="width: 20px;">  
    </li>
</ul>

在我上面的列表中，我想找到始终在div中的文本Certificats et forfaits，一旦发现需要在其旁边隐藏定位标记，它将始终在li之后。 我该如何获得帮助？

Answer 1

请检查以下片段。

 $( document ).ready(function() { $('ul li').each(function(){ if($(this).children('div').text() == 'Certificats et forfaits'){ $(this).children('a').hide(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="select2-choices"> <li class="select2-search-choice"> <div>Informatique Électronique</div> <a href="#" class="select2-search-choice-close" tabindex="-1"></a> </li> <li class="select2-search-choice"> <div>Informatique Électronique &gt; Accessoires Informatique</div> <a href="#" class="select2-search-choice-close" tabindex="-1"></a> </li> <li class="select2-search-choice"> <div>Mode et Accessoires</div> <a href="#" class="select2-search-choice-close" tabindex="-1"></a> </li> <li class="select2-search-choice"> <div>Certificats et forfaits</div> <a href="#" class="select2-search-choice-close" tabindex="-1"></a> </li> <li class="select2-search-field"> <label for="s2id_autogen3" class="select2-offscreen"></label> <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen3" placeholder="" style="width: 20px;"> </li> </ul> 

Answer 2

试试看：使用.filter()获取所需的div，然后隐藏下一个锚点

 $(function(){ $('ul li>div').filter(function(){ return $(this).text() == 'Certificats et forfaits'; }).next().hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="select2-choices"> <li class="select2-search-choice"> <div>Informatique Électronique</div> <a href="#" class="select2-search-choice-close" tabindex="-1">Informatique Électronique</a> </li> <li class="select2-search-choice"> <div>Informatique Électronique &gt; Accessoires Informatique</div> <a href="#" class="select2-search-choice-close" tabindex="-1">Informatique Électronique &gt; Accessoires Informatique</a> </li> <li class="select2-search-choice"> <div>Mode et Accessoires</div> <a href="#" class="select2-search-choice-close" tabindex="-1">Mode et Accessoires</a> </li> <li class="select2-search-choice"> <div>Certificats et forfaits</div> <a href="#" class="select2-search-choice-close" tabindex="-1">Certificats et forfaits</a> </li> <li class="select2-search-field"> <label for="s2id_autogen3" class="select2-offscreen"></label> <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen3" placeholder="" style="width: 20px;"> </li> </ul> 

编辑 -要隐藏特定的锚标签，可以在父li中找到锚，如下所示

$(function(){
       $('ul li>div').filter(function(){
          return $(this).text() == 'Certificats et forfaits';
        }).parent().find('a.select2-search-choice-close').hide();
    });

Answer 3

使用包含选择器

 $( "ul li>div:contains('Certificats et forfaits')" ).hide();

隐藏其锚点

$( "ul li>div:contains('Certificats et forfaits')" ).siblings("a").hide();

工作演示

Answer 4

可以用.each()和jquery

$("li").each(function(){
    if($(this).find("div").html() == "Certificats et forfaits"){
       $(this).next().hide();
    }
});

小提琴的例子

Answer 5

如果您知道列表中的哪个数字需要隐藏，则可以使用:nth-child(#)选择器。 以下是根据您提供的代码隐藏锚标记的方法：

.select2-search-choice:nth-child(4) a {
  display: none;
  }