Question

我想显示的是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+

Answer 1

据我了解，您想基于id中的整数显示段落数。

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

注意：

我在您的段落上留下了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>

Answer 2

这可以做到

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

Answer 3

请使用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>

Answer 4

如上所述，您不能有多个具有相同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/

Answer 5

因此，设置一个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>

Answer 6

根据评论，我认为我了解您的要求。

对于您的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不匹配的

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

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

显示隐藏段落取决于div的数量

6 个答案: