显示隐藏段落取决于 div 计数

我想显示的是，如果div id="div1"那么我需要隐藏除 id 为para1的段落之外的所有段落。

我可以通过 CSS 做到这一点，但问题是我有 100 多组div。我想知道如何通过jQuery或任何代码来做到这一点。

<div class="divclass" id="div1">
<p id="para1" class="pclass">test</p>
<p id="para2" class="pclass">test</p>
<p id="para3" class="pclass">test</p>
<p id="para4" class="pclass">test</p>
<p id="para5" class="pclass">test</p>
</div>
<div class="divclass" id="div2">
<p id="para1" class="pclass">test</p>
<p id="para2" class="pclass">test</p>
<p id="para3" class="pclass">test</p>
<p id="para4" class="pclass">test</p>
<p id="para5" class="pclass">test</p>
</div>
<div class="divclass" id="div3">
<p id="para1" class="pclass">test</p>
<p id="para2" class="pclass">test</p>
<p id="para3" class="pclass">test</p>
<p id="para4" class="pclass">test</p>
<p id="para5" class="pclass">test</p>
</div>
.... up to 100+

如上面的注释中所述，您不能有多个具有相同 id 的元素。所以你必须改变你的div的id，例如

<div class="divclass" id="div1">
<p id="div1-para1" class="pclass">test</p>
<p id="div1-para2" class="pclass">test</p>
<p id="div1-para3" class="pclass">test</p>
</div>
<div class="divclass" id="div2">
<p id="div2-para1" class="pclass">test</p>
<p id="div2-para2" class="pclass">test</p>
</div>

之后，您可以执行类似操作

$('ul.divclass>li:not(:first-child)').hide();

有关详细信息，请参阅小提琴：http://jsfiddle.net/b7yrvk6z/12/

这将做到这一点

$("#div1").children().each(function (){
if($(this).attr("id") !== "para1")
$(this).hide();
});

使用 name 属性代替 id 属性，因为 id 必须是唯一的，以便更好地编码。

function showHideDiv(){
for(var a=0;a<document.getElementsByTagName('div').length;a++){
var b = document.getElementsByTagName('div')[a].getElementsByTagName("*");
for(var c=0;c<b.length;c++){
if(a==c){
b[c].style.display='block';
}else{
b[c].style.display='none';
}
}
}
}

<body onload="showHideDiv()">
<div class="divclass" id="div1">
<p name="para1" class="pclass">test</p>
<p name="para2" class="pclass">test</p>
<p name="para3" class="pclass">test</p>
<p name="para4" class="pclass">test</p>
<p name="para5" class="pclass">test</p>
</div>
<div class="divclass" id="div2">
<p name="para1" class="pclass">test</p>
<p name="para2" class="pclass">test</p>
<p name="para3" class="pclass">test</p>
<p name="para4" class="pclass">test</p>
<p name="para5" class="pclass">test</p>
</div>
<div class="divclass" id="div3">
<p name="para1" class="pclass">test</p>
<p name="para2" class="pclass">test</p>
<p name="para3" class="pclass">test</p>
<p name="para4" class="pclass">test</p>
<p name="para5" class="pclass">test</p>
</div>
<div class="divclass" id="div4">
<p name="para1" class="pclass">test</p>
<p name="para2" class="pclass">test</p>
<p name="para3" class="pclass">test</p>
<p name="para4" class="pclass">test</p>
<p name="para5" class="pclass">test</p>
</div>

因此，设置一个 css 规则，隐藏所有段落并循环以显示您希望可见的段落。

$(".divclass").each( function (i) {
$(this).find("p").eq(i).addClass("show");
});

.divclass > p {
display: none;
}
p.show {
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divclass" id="div1">
<p data-id="para1" class="pclass">test 1-1</p>
<p data-id="para2" class="pclass">test 1-2</p>
<p data-id="para3" class="pclass">test 1-3</p>
<p data-id="para4" class="pclass">test 1-4</p>
<p data-id="para5" class="pclass">test 1-5</p>
</div>
<div class="divclass" id="div2">
<p data-id="para1" class="pclass">test 2-1</p>
<p data-id="para2" class="pclass">test 2-2</p>
<p data-id="para3" class="pclass">test 2-3</p>
<p data-id="para4" class="pclass">test 2-4</p>
<p data-id="para5" class="pclass">test 2-5</p>
</div>
<div class="divclass" id="div3">
<p data-id="para1" class="pclass">test 3-1</p>
<p data-id="para2" class="pclass">test 3-2</p>
<p data-id="para3" class="pclass">test 3-3</p>
<p data-id="para4" class="pclass">test 3-4</p>
<p data-id="para5" class="pclass">test 3-5</p>
</div>

根据评论，我想我明白你要做什么。

对于您的 HTML，我会将段落更改为使用数据属性而不是 ID(ID 都应该是唯一的，这意味着您不能将 ID para1 设置为多个元素(

<div class="divclass" id="div1">
<p data-div="div1" class="pclass">Show Div 1</p>
<p data-div="div2" class="pclass">test</p>
<p data-div="div3" class="pclass">test</p>
<p data-div="div4" class="pclass">test</p>
<p data-div="div5" class="pclass">test</p>
</div>
<div class="divclass" id="div2">
<p data-div="div1" class="pclass">test</p>
<p data-div="div2" class="pclass">Show Div 2</p>
<p data-div="div3" class="pclass">test</p>
<p data-div="div4" class="pclass">test</p>
<p data-div="div5" class="pclass">test</p>
</div>
<div class="divclass" id="div3">
<p data-div="div1" class="pclass">test</p>
<p data-div="div2" class="pclass">test</p>
<p data-div="div3" class="pclass">Show Div 3</p>
<p data-div="div4" class="pclass">test</p>
<p data-div="div5" class="pclass">test</p>
</div>

然后抓取你的父div，并隐藏数据与父 ID 不匹配的div

$("[id^=div]").each(function(){
let this_id = $(this).attr('id') 
$(this).children('[data-div!="' + this_id + '"]').hide()
})

https://codepen.io/Nahana/pen/BOvrwG

我的理解是，您希望根据id中的整数显示段落数。

根据您的评论：我修改了代码段(注释掉了一个 if 并替换了它(。您实际上希望显示与id关联的索引p。

注意：

我在您的段落上留下了id，从技术上讲这是不正确的，并且在下面的代码示例中不需要它们。
我独自离开了内部循环，但它可以替换为;
```
$(elem).find("p").eq(count-1).show();
```

$("div.divclass").each(function(idx, elem) {
//get the count from the div's id
let count = $(elem).attr("id").replace(/div/, ""); 
$(elem).find("p").each(function(ii, iElem) {
//if (ii < count) $(iElem).show();  //show that many
if (ii == (count-1)) $(iElem).show();  //show that one
});
});

/*lets give the div's a border for clarity */
.divclass {
border: 1px solid black;
}
/*hide all the paragraphs, we'll show the right ones at runtime*/
.divclass > p {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divclass" id="div1">
<p id="para1" class="pclass">this is number 1</p>
<p id="para2" class="pclass">test</p>
<p id="para3" class="pclass">test</p>
<p id="para4" class="pclass">test</p>
<p id="para5" class="pclass">test</p>
</div>
<div class="divclass" id="div2">
<p id="para1" class="pclass">test</p>
<p id="para2" class="pclass">this is number 2</p>
<p id="para3" class="pclass">test</p>
<p id="para4" class="pclass">test</p>
<p id="para5" class="pclass">test</p>
</div>
<div class="divclass" id="div3">
<p id="para1" class="pclass">test</p>
<p id="para2" class="pclass">test</p>
<p id="para3" class="pclass">this is number 3</p>
<p id="para4" class="pclass">test</p>
<p id="para5" class="pclass">test</p>
</div>

相关内容

最新更新

热门标签：