JavaScript变量如jQuery选择以获得特定的子元素

我在DOM结构如下：JavaScript变量如jQuery选择以获得特定的子元素

<div class="parent"> 
    <div class="child0"></div> 
    <div class="child1"></div> 
    <div class="child2"></div> 
    <div class="child3"></div> 
    <div class="child4"></div> 
    <div class="child5"></div> 
      ... 
</div>

什么我尝试在JavaScript做的是只显示特定的元素并隐藏其他人就像这样：

showItems(0,3,'.parent'); // show child 0,1,2 

    function showItems(offset,limit,component) 
    { 
     $(component).children().hide(); 
     for(var i=offset;i<=(offset+limit);i++) 
     { 
      $(component+':nth-child('+i+')').show(); //!!! does not make them visible 
     } 

    }

什么想法？

谢谢！

来源

2014-10-09 sstauross

您需要组件之间的空间：第n个孩子。因为现在你正在选择任何具有“父”类的元素，这也是第n个孩子。

来源

2014-10-09 14:54:31

你应该更容易，使用.eq()方法来代替，就像这样：

function showItems(offset,limit,component) 
{ 
    $(component).children().hide(); 
    for(var i=offset;i<=(offset+limit);i++) 
    { 
     $(component).children().eq(i).show(); //this will work! 
    } 

}

来源

2014-10-09 14:55:45

只需添加到由REMCO答案，加上“>”，以确保您只选择直接孩子的之一。

因此，一种方式可以编写

$(component+' > :nth-child('+i+')').show();

甚至更好

$(component+' > div:nth-child('+i+')').show();

如果不放置“>”符号，它也可以选择孩子的div里面的元素，如果存在。

来源

2014-10-09 15:06:16

良好的出发点和我的疏忽，虽然他只通过。孩子躲在直接孩子的（）调用，所以在实践中不应该产生了影响。 – 2014-10-09 15:08:28

我看不出第二个比第一个好。所有的孩子都是'div'元素，如果是已知的，则使用'DIV：第n-child'代替简单'：第n-child'实际上是效率较低，因为系统必须首先检查，看是否元素是一个'div'，然后检查它是否是'：nth-child'。 – 2014-10-09 15:22:11

那么在这种情况下，它似乎并不成为一个问题，但假设如果父格有最终一些更多的内容或分隔元素，那么这将是有帮助没有？ – 2014-10-09 15:45:13

JavaScript变量如jQuery选择以获得特定的子元素

回答

相关问题