目標的兄弟姐妹，與第n個孩子

我努力的目標點擊一個項目的第n個兄弟姐妹。基本上是指定下一個元素是第n個（4n + 4），以便能夠在此之後插入一個新元素，有點像「新行」。目標的兄弟姐妹，與第n個孩子

$("li").click(function() { 
    $(this).next('li:nth-child(4n+4)').after('<li class="full">new full width item</li>'); 
});

這是.next（'li：nth-child（4n + 4）'），似乎沒有工作。

這是一個有點難以解釋，但你會明白我的意思是： http://jsfiddle.net/hYE7e/1/

來源

2013-06-29 Emin

這實際上工作正常，但after()只會執行，當下一個li是4n + 4孩子。也就是說從一開始，它會正常工作，如果你在3 或點擊7.右鍵點擊你在3之後，第7人會停止工作，6日一會的工夫，而不是，因爲7現已成爲第八元素。

有點笨拙更新：http://jsfiddle.net/hYE7e/3/

$("ul li:nth-child(4n)").addClass("last-in-line"); 
$("li").click(function() { 
    $(this).nextAll("li.last-in-line").andSelf(".last-in-line").filter(":first").after('<li class="full">new full width item</li>'); 
});

andSelf(".last-in-line").filter(":first")確保4日，8日，等：點擊元素將工作。

更新：

在評論中討論後，我覺得我有：http://jsfiddle.net/hYE7e/7/

通過自定義過濾器：

$("li").click(function() { 
    var myIndex = $("li:not(.full)").index($(this)); // Save our position in a row 
    $(this) 
     .nextAll("li:not(.full)") 
     .andSelf() 
     .filter(function(index){ // Get 4n'th lis from 'not(.full)' set 
      return (index + myIndex + 1) % 4 == 0; 
     }) 
     .add("li:last") // Make sure last rows will work 
     .first()   // Only add 'li' after first matching element 
     .after('<li class="full">new full width item</li>'); 
});

來源

2013-06-29 13:34:27 mishik

哦，我明白了！我希望它能夠處理所有元素，但是在「最後一行=第n（4n + 4）」之後插入新元素。有小費嗎？它應該像谷歌圖片一樣工作，當你點擊一個圖像打開在「圖像行」下方的框中。 – Emin

雖然回覆良好，但這不是一個答案，而是一個受過良好教育的問題解釋。 –

@LeeTaylor，剛剛添加的工作示例:) – mishik

我想你想過濾所有ucoming兄弟姐妹，不僅是下一個，對不對？也許這是你想要的：

$(this).nextAll('li:nth-child(4n+4)').first().after('<li class="full">new full width item</li>');

看到我的updated Fiddle here。

來源

2013-06-29 13:34:27

差不多！我只想在FIRST/NEXT第n（4n + 4）個同胞之後插入一次新元素。有點像Google圖片在點擊圖片時的工作方式。 – Emin

更新了我的代碼。在選擇後添加第一個（）。 –

我喜歡它。但它並沒有真正做到我想要的。如果我不斷添加新行，那麼在一段時間後它不會正確執行。我試圖通過向原始項添加一個類來調整代碼，並且只對這些項進行過濾：http://jsfiddle.net/s4seS/1/但仍然無法按照我想要的方式工作。最後一行的項目根本不起作用。 – Emin

目標的兄弟姐妹，與第n個孩子

回答

相關問題