Question

使用JavaScript或Jquery，我想隐藏具有内容的div（＃34;（想要摆脱这个div）＆＃34;在他们里面。因此，定位第一个列表项中的第四个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。

示例：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有我正在寻找的代码...谢谢大家。

隐藏基于Jquery eq的div

5 个答案: