隐藏基于Jquery eq的div

Question

使用JavaScript或Jquery，我想在其中隐藏具有“（想要摆脱这个div）”内容的div。 因此，定位第一个列表项中的第四个div，以及第三个列表项中的第四个div。 以下是我的代码。 感谢您的帮助！！

<ul id="category-nav-list" class="list-unstyled no-margin">   
                    <li class="dropdown-submenu menu l1">
                    <div class="department-flyout-categories row">
                        <div class="menu-column col-sm-4 col-md-3">
                                test
                         </div>
                         <div class="menu-column col-sm-4 col-md-3">
                                test
                         </div>
                         <div class="menu-column col-sm-4 col-md-3">
                                test
                         </div>
                         <div class="menu-column col-sm-4 col-md-3">
                                test (want to get rid of this column)
                         </div>
                     </div>
                     </li>
                     <li class="dropdown-submenu menu l1">
                    <div class="department-flyout-categories row">
                        <div class="menu-column col-sm-4 col-md-3">
                                test
                         </div>
                         <div class="menu-column col-sm-4 col-md-3">
                                test
                         </div>
                         <div class="menu-column col-sm-4 col-md-3">
                                test
                         </div>
                         <div class="menu-column col-sm-4 col-md-3">
                                test
                         </div>
                     </div>
                     </li>
                     <li class="dropdown-submenu menu l1">
                    <div class="department-flyout-categories row">
                        <div class="menu-column col-sm-4 col-md-3">
                                test
                         </div>
                         <div class="menu-column col-sm-4 col-md-3">
                                test
                         </div>
                         <div class="menu-column col-sm-4 col-md-3">
                                test
                         </div>
                         <div class="menu-column col-sm-4 col-md-3">
                                test (want to get rid of this column)
                         </div>
                     </div>
                     </li>
                     </ul>

我正在努力的方向：

$('something something something .department-flyout-categories .menu-column').eq(4).hide();

Answer 1

我会给那些一个类名并以这种方式隐藏它。 不确定您需要如何使用它。

Answer 2

这对你有用吗？ 你说你希望div隐藏在第一项（零索引）和第三项（第二项索引）中，所以我假设这种模式会重复，你甚至可以选择索引元素。 我也使用了nth-child而不是eq 。 这里也是jsfiddle 。

 $(document).ready(function() { $(".department-flyout-categories:even .menu-column:nth-child(4)").hide(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="category-nav-list" class="list-unstyled no-margin"> <li class="dropdown-submenu menu l1"> <div class="department-flyout-categories row"> <div class="menu-column col-sm-4 col-md-3"> test </div> <div class="menu-column col-sm-4 col-md-3"> test </div> <div class="menu-column col-sm-4 col-md-3"> test </div> <div class="menu-column col-sm-4 col-md-3"> test (want to get rid of this column) </div> </div> </li> <li class="dropdown-submenu menu l1"> <div class="department-flyout-categories row"> <div class="menu-column col-sm-4 col-md-3"> test </div> <div class="menu-column col-sm-4 col-md-3"> test </div> <div class="menu-column col-sm-4 col-md-3"> test </div> <div class="menu-column col-sm-4 col-md-3"> test </div> </div> </li> <li class="dropdown-submenu menu l1"> <div class="department-flyout-categories row"> <div class="menu-column col-sm-4 col-md-3"> test </div> <div class="menu-column col-sm-4 col-md-3"> test </div> <div class="menu-column col-sm-4 col-md-3"> test </div> <div class="menu-column col-sm-4 col-md-3"> test (want to get rid of this column) </div> </div> </li> </ul> 

Answer 3

你可以利用：

• ：even ：在你的情况下，这将让你选择第一个和最后一个部门 - 弹出类别
• ：last-child ，以便选择每个部门的最后一个子项- 弹出类别

 $('#category-nav-list .dropdown-submenu div:even div:last-child').hide(); $('#category-nav-list .dropdown-submenu div:even div:last-child').each(function(idx, ele) { console.log(idx + ': ' + ele.textContent.trim()) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="category-nav-list" class="list-unstyled no-margin"> <li class="dropdown-submenu menu l1"> <div class="department-flyout-categories row"> <div class="menu-column col-sm-4 col-md-3"> test </div> <div class="menu-column col-sm-4 col-md-3"> test </div> <div class="menu-column col-sm-4 col-md-3"> test </div> <div class="menu-column col-sm-4 col-md-3"> test (want to get rid of this column) </div> </div> </li> <li class="dropdown-submenu menu l1"> <div class="department-flyout-categories row"> <div class="menu-column col-sm-4 col-md-3"> test </div> <div class="menu-column col-sm-4 col-md-3"> test </div> <div class="menu-column col-sm-4 col-md-3"> test </div> <div class="menu-column col-sm-4 col-md-3"> test </div> </div> </li> <li class="dropdown-submenu menu l1"> <div class="department-flyout-categories row"> <div class="menu-column col-sm-4 col-md-3"> test </div> <div class="menu-column col-sm-4 col-md-3"> test </div> <div class="menu-column col-sm-4 col-md-3"> test </div> <div class="menu-column col-sm-4 col-md-3"> test (want to get rid of this column) </div> </div> </li> </ul> 

Answer 4

选择具有相同类的所有div（您可以为div创建一个唯一的类，如.MyAwesomeDivs或使用您拥有的那些），遍历它们，询问它们是否包含您的字符串以及是否为true delete。

示例： https ： //jsfiddle.net/5zr7sxmz/1/

$('.menu-column.col-sm-4.col-md-3').each(function(i, obj) {
   if($(this).html().indexOf("want to get rid of this column") >= 0)
   {
       $(this).hide();
   }
});

Answer 5

    $('.menu-column.col-sm-4.col-md-3').each(function(i, obj) {
if($(this).html().indexOf("want to get rid of this column") >= 0)
{
   $(this).hide();
}
});

@FerDeath有我正在寻找的代码...谢谢大家。