Question

我需要编写一段代码（我正在考虑使用JavaScript / jQuery）来隐藏突出显示的两个div。问题是它们没有ID，它们属于类，但不是这些类中的唯一对象。所以我无法隐藏课程，因为这会隐藏更多我想要的东西。 “父”div具有ID。

请在此处找到代码： enter image description here

有什么方法可以通过父母的订单号来引用我想要隐藏的div？任何其他解决方案将不胜感激。

Answer 1

我看到这些元素是id为#view的元素的子子元素，因此您可以使用nth-选择器，或者您可以使用jQuery :eq()

$("#view > div:nth-of-type(3) > div:nth-of-type(2), 
   #view > div:nth-of-type(4) > div:nth-of-type(1)").hide()

或使用CSS （推荐）

#view > div:nth-of-type(3) > div:nth-of-type(2), 
#view > div:nth-of-type(4) > div:nth-of-type(1) {
    display: none;
}

此处，第一个选择器即#view > div:nth-of-type(3) > div:nth-of-type(2)选择第三个div元素，该元素是ID为#view的元素的直接子元素，并进一步选择直接div } element是该类型的第二个孩子

第二个选择器，#view > div:nth-of-type(4) > div:nth-of-type(1)选择第四个直接div子元素到ID为#view的元素，并进一步选择第一个直接子div

Answer 2

这对我有用。如果没有其他兄弟姐妹有相同的班级名称。

HTML

<div>
    <div class="child"></div>
</div>
<div id="parent">
    <div class="child">

    </div>
</div>
<button onclick="hideDivs()">Hide</button>

的Javascript

function hideDivs() {
    var parentDiv = document.getElementById('parent');
    var childDivs = parentDiv.getElementsByClassName('child');
    for (var i = 0; i < childDivs.length; i++) {
        childDivs[i].style.display = "none";
    };
}

Answer 3

我不是按位置编码的粉丝（例如第3或第4个元素），因为对标记的相对较小的更改（例如仅为空格添加新div）可能会破坏依赖于特定硬编码位置的代码。

如果您希望在标记发生更改时不会中断某些可能会更改项目相对位置的内容，那么您必须查找要隐藏的更具体内容。根据您对内容的了解以及表明您拥有正确div的最佳标记，有许多不同的方法可以做到这一点。

这是在您要隐藏的内容中查找唯一标识符的一种方法，然后转到正确的父级以隐藏该内容：

$("#RoleListTB").closet(".h1r1").hide();
$("#AccessProfileListTB").closest(".h111").hide();

Answer 4

您可以通过在查询中使用CSS伪选择器轻松完成此操作。

$('#view').find('div.h1r1:nth-of-type(2)')

或者你可以更具体一点

.h111+.h1r1

Answer 5

如果您确定他们的位置是固定的且不会改变，那么您可以使用nth-child选择器。

这样的事情：

$("#view").children("div:nth-child(3)").children("div:nth-child(2)").hide();
$("#view").children("div:nth-child(4)").children("div:nth-child(1)").hide();

或者，只是：

$("#view > div:nth-child(3) > div:nth-child(2)").hide();
$("#view > div:nth-child(4) > div:nth-child(1)").hide();

或者，使用.eq：

$("#view").children("div").eq(2).children("div").eq(1).hide();
$("#view").children("div").eq(3).children("div").eq(0).hide();

注意：.eq从零开始。

Answer 6

您可以使用:gt Jquery选择器按索引搜索：

$( ".some:gt(0)" );

0 - 是第一个.some

Answer 7

您可以使用:eq选择器选择特定索引处的元素。

假设父div的ID为parent 它让孩子div's拥有班级sub。

所以如果你想隐藏第二个子元素

$("#parent .sub:eq(1)").hide();

因为儿童订购以“0＆＃39;索引

Answer 8

您可以使用表格的ID来识别容器。

$("#RoleListTB").closest(".hlrl").hide();

closest()正在将DOM查找到下一个匹配的父级，因此您可以从您的桌面开始，如图所示。

我为此做了一个小提琴：

<a href="#" id="toggle" >show/hide</a>
<div>
    <div class="hlrl">
        <span id="RoleListTB">
            RoleList Table
        </span>
    </div>
</div>

$("#toggle").click(function(){
    $("#RoleListTB").closest(".hlrl").toggle();
});

http://jsfiddle.net/NGVQ3/

Answer 9

Div可以有多个班级。。

<div class="h111">

更改为

<div class="h111 hideDiv">

CSS

.hideDiv {display: none;}

然后使用javascript在您希望它显示时显示：）

Answer 10

您的div包含具有ID的表。所以你可以使用

$（＆＃39;＃yourTableIDHere＆＃39）。亲本（）隐藏（）;

此代码将隐藏您的div。

如何隐藏没有ID的div

10 个答案: