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選擇以獲得特定的子元素

回答

相關問題