Javascript 每个相同父div的jQuery使用：n子级切换嵌套div（如果多于3个）

我有两个内容不同的相同父级

div

s。如果父

div

有3个以上的子

div

s，则应在

div

末尾显示“显示更多”文本，该文本将滑动所有剩余的隐藏

div

s。我不熟悉JavaScript和jQuery，我不能完全理解选择器。这是我的密码：

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>   
    <div class="child">4</div> 
    <div class="child">5</div> 
</div>
<span class="showhide">Show-hide</span>

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
</div>
<span class="showhide">Show-hide</span>

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>   
    <div class="child">4</div> 
</div>
<span class="showhide">Show-hide</span>

只有代码的第一部分起作用。它在每个父级

div

中隐藏超过3个

div

。但是隐藏文本和切换不起作用

我尝试了多种变体，例如将

span

放在父

div

中，将选择器更改为

。最近的
，也尝试使用
：gt（）
而不是
：n子
，但都不起作用。
您可以这样做

$(".parent").each(function() {
  $(this).find(".child:gt(2)").hide();
});
$(".showhide").click(function() {
  $(this).prev().find(".child:gt(2)").slideToggle();
});


.gt（）
选择器将返回索引大于指定参数的元素

如果要在切换后更改文本，请使用以下代码

$(".parent").each(function() {
  $(this).find(".child:gt(2)").hide();
});
$(".showhide").click(function() {
  var obj = this;
  $(this).prev().find(".child:gt(2)").slideToggle(function() {
    if ($(this).is(":visible"))
      $(obj).text("hide");
    else
      $(obj).text("show more");
  });
});


请注意，您需要使用
slideToggle
的回调功能来更改文本，因为
slideToggle
是异步的

你可以这样做

$(".parent").each(function() {
  $(this).find(".child:gt(2)").hide();
});
$(".showhide").click(function() {
  $(this).prev().find(".child:gt(2)").slideToggle();
});


.gt（）
选择器将返回索引大于指定参数的元素

如果要在切换后更改文本，请使用以下代码

$(".parent").each(function() {
  $(this).find(".child:gt(2)").hide();
});
$(".showhide").click(function() {
  var obj = this;
  $(this).prev().find(".child:gt(2)").slideToggle(function() {
    if ($(this).is(":visible"))
      $(obj).text("hide");
    else
      $(obj).text("show more");
  });
});


请注意，您需要使用
slideToggle
的回调功能来更改文本，因为
slideToggle
是异步的

您可以使用css隐藏它：

.parent div:nth-child(n+4) {
  display: none;
}

并使用jquery切换类以使其可见/隐藏


$（'.parent'）.filter（函数（）{
return$（this）.children（）.length您可以使用css隐藏它：

.parent div:nth-child(n+4) {
  display: none;
}

并使用jquery切换类以使其可见/隐藏


$（'.parent'）.filter（函数（）{
return$（this）.children（）.length原始小提琴和编辑的小提琴是相同的链接。请更正。谢谢。如果
div
s小于3，是否有可能用您的方法隐藏文本
show hide
？
如果（！divs.length）
-我猜是这样：）感谢您的支持！原始fiddle和编辑的fiddle是相同的链接。请更正，谢谢。如果
div
s小于3，是否可以用您的方法隐藏文本
show hide
？
如果（！divs.length）
-我想是这样：）谢谢您的支持！