jQuery的：第n個孩子（）

我有一個列表jQuery的：第n個孩子（）

<article class="post">Bla bla bla</article> 
<article class="post">Bla bla bla</article> 
<article class="post">Bla bla bla</article> 
<article class="post">Bla bla bla</article> 
<article class="post">Bla bla bla</article> 
<article class="post">Bla bla bla</article> 
<article class="post">Bla bla bla</article>

我會選擇5 & 6元，8日& 9日，11日& 12日，14日& 15日，等等等等......用

$('div#elencoNonHome > article.post:nth-child(???)').css('margin-left', '20px');

我可以用jQuery函數做到這一點嗎？

來源

2013-03-25 Swim89

你可以用第n個孩子做到這一點。只需將這兩個陳述加在一起。

$('div#elencoNonHome > article.post:nth-child(3n+6)') 
.add('div#elencoNonHome > article.post:nth-child(3n+5)') 
.css('margin-left', '20px');

請參閱DEMO。

來源

2013-03-25 14:52:11 Antony

如果我將這個應用到新的元素？用「活」？ – Swim89 2013-03-25 16:56:23

@ Swim89使用'.on（）'。 '.live（）'被棄用。在加載新元素後再次重新應用這些語句。 – Antony 2013-03-25 17:10:41

你能給我寫個例子嗎？ – Swim89 2013-03-25 17:13:14

你不能直接用nth-child做到這一點。它有相當簡單的行匹配邏輯。但是，如果您反轉邏輯，以便默認邊距爲20px，那麼使用第n個子將行＃7，＃10，＃13等拉至任何它應該以其他方式進行的操作

$('div#elencoNonHome > article.post').css('margin-left', '20px'); 
$('div#elencoNonHome > article.post:nth-child("3n+7")').css('margin-left', 0)

來源

2013-03-25 14:43:29

這並不完全符合OP的要求（甚至在修復引起錯誤消息的額外雙引號之後）。 http://jsfiddle.net/R4vX2/2/ – JJJ 2013-03-25 14:51:10

當然，爲什麼不呢。

$('div#elencoNonHome > article.post').filter(function() { 
    var index = $(this).index(); 
    return index >= 4 && index % 3; 
}).css('margin-left', '20px');

演示：http://jsfiddle.net/R4vX2/1/

來源

2013-03-25 14:43:43 JJJ

jQuery的：第n個孩子（）

回答

相關問題