將數字類應用到子元素

我似乎無法弄清楚如何將類添加到其父元素中的一組元素。將數字類應用到子元素

例子：

<div class="block"> 
    <a href="#" class="thumbnail"></a> 
    <a href="#" class="thumbnail"></a> 
    <a href="#" class="thumbnail"></a> 
</div> 
<div class="block"> 
    <a href="#" class="thumbnail"></a> 
    <a href="#" class="thumbnail"></a> 
    <a href="#" class="thumbnail"></a> 
</div>

我想它看起來像這樣：

<div class="block"> 
    <a href="#" class="thumbnail group1"></a> 
    <a href="#" class="thumbnail group1"></a> 
    <a href="#" class="thumbnail group1"></a> 
</div> 
<div class="block"> 
    <a href="#" class="thumbnail group2"></a> 
    <a href="#" class="thumbnail group2"></a> 
    <a href="#" class="thumbnail group2"></a> 
</div>

我想是這樣：

$("div.Block a").attr("class", function (arr) { 
    return "group" + arr; 
});

但是，返回塊內的類都具有不同的數字而不是組。也許就像在父div上使用它，並以某種方式將master div類複製到每個子級之後？

來源

2012-05-18 Tom

您可以通過div的做到這一點使用下面的代碼

$("div.block").each(function(index){ 
    $(this).find('a').addClass("group" + (index+1)); 
})

來源

2012-05-18 20:52:30

謝謝大家！我似乎無法讓詹姆斯的工作我最終與這個版本的代碼。是的，我看到我的例子中有類錯誤，但是當我寫這篇文章時，這只是一個錯字。 – Tom

$("div.block").each(function(i){ 
    $(this).find("a").addClass("group" + (i + 1)); 
});

來源

2012-05-18 20:51:58

他的div類是「塊」而不是「塊」..他有一個錯字.. –

@vega正確的你。 –

$('div.block').each(function(idx) { 
    $('a', this).addClass('group' + (idx + 1)); 
});

來源

2012-05-18 20:52:16 j08691

我通常更喜歡這種表示法，而不是'.find' – lucuma

一般來說，哪個更好'$（'a'，this）'或'$（this）.find（'？ –

@vega）它們基本上是一樣的。可能只是使用你發現更清楚的任何一個。http://stackoverflow.com/questions/2342282/jquery-find-versus-context-selection –

嘗試像下面，

//  v-- Note: your div class is block not Block. 
$("div.block").each (function (idx) { 
    $(this).find('a').addClass('group' + (idx+1)); 
});

來源

2012-05-18 20:52:31

循環，並從該迭代器使用索引：

$(".block").each(function(i,e){ 
    $("a",e).addClass("group" + (i+1)); 
})

請注意使用addClass而不是attr。另請注意，使用e（元素）作爲「a」選擇器的上下文

來源

2012-05-18 20:54:43 MorganTiley

將數字類應用到子元素

回答

相關問題