尋找下一個被4整除的元素

所以我有一個像這樣的元素列表;尋找下一個被4整除的元素

<div></div> 
<div class="test"></div> 
<div></div> 
<div class="test2"></div> 
<div></div> 
<div></div> 
<div class="test3"></div> 
<div></div> 
<div class="test4"></div> 
<div></div>

，基本上我需要弄清楚元素相對於它的順序是被4整除，從一開始計數選擇下一個是什麼。如果相對於選擇器沒有足夠的元素，則返回最後一個元素。埃爾戈，我會得到以下結果;

$(".test").nextFour().after("Hello"); 
// or $(".test2").nextFour().after("Hello"); 

<div></div> 
<div class="test"></div> 
<div></div> 
<div class="test2"></div> 
Hello 
<div></div> 
<div></div> 
<div class="test3"></div> 
<div></div> 
<div class="test4"></div> 
<div></div>

$(".test3").nextFour().addClass("hello"); 

<div></div> 
<div class="test"></div> 
<div></div> 
<div class="test2"></div> 
<div></div> 
<div></div> 
<div class="test3"></div> 
<div class="hello"></div> 
<div class="test4"></div> 
<div></div>

$(".test4").nextFour().css("color", "red"); 

<div></div> 
<div class="test"></div> 
<div></div> 
<div class="test2"></div> 
<div></div> 
<div></div> 
<div class="test3"></div> 
<div></div> 
<div class="test4"></div> 
<div style="color: red;"></div>

我將如何實現這一目標？

來源

2013-08-26 Emphram Stavanger

http://www.w3schools.com/cssref/sel_nth-child.asp – Joum

^^他的鏈接無關 –

@Joum：http://www.w3fools.com/ –

var elem = $(selector); 
var idx = elem.index() + 1; 

var target = elem.parent().children().eq(idx + 4-(idx%4)-1); 

if (!target.length) 
    target = elem.parent().children().last();

DEMO：http://jsfiddle.net/zZVax/1/

來源

2013-08-26 12:31:59

我喜歡這種方法，只有模態方法（'％'）不是非常快。如果這將實現大規模，它會減慢速度 – Martijn

它實際上是非常快速，與jQuery中使用的大多數方法相比。它不會造成任何明顯的差異。 –

如果你想有一個selecter後使用它作爲一個功能，你可以原型的東西：

// Here is a untested example: 
$.fn.nextFour = function (arguments){ 
    // As suggested by Crazy Train: 
    return $(this).parent().children().eq(idx + 4-(idx%4)-1); // -1 to correct zero-based index 
}

我已經改變了我的答案Crazytrain指出，問題不動4個元素之後，但移動至4起始於2整除的下一個項目，將使4，不是6

我會繼續下面的選擇，以顯示如何移動4個點，但它不是在asnwer這個問題： CSS有一個可用於jQuery的第n個選擇器：

$('div:nth-child(4n+'+startElement+')').css({background: pink});

來源

2013-08-26 12:30:56 Martijn

我認爲你誤解了這個問題。 OP不想讓四個兄弟姐妹前進。 OP想要前進到可以被四整除的下一個。 –

是的，誤讀了它，我更新了原型部分。看起來像css nth孩子也是關閉，刪除它。你介意我添加最後的解決方案嗎？我不想複製你的答案，但我只能提出你的一次：P將是一個恥辱它OP錯過了這個 – Martijn

在補充瘋狂列車，您可以創建一個jQuery的方法來使用它就像你的例子：

(function($){ 
    $.fn.nextFour = function() { 
     elem = this.parent().children().eq(this.index() + 3-(this.index()%4)); 
     return elem.length ? elem : this.parent().children().last(); 
    }; 
})(jQuery);

編輯：注意它必須是+ 3才能按預期工作。如果沒有找到，我還添加了一段代碼以返回最後一個元素。

見Demo jsFiddle

更靈活，也可以通過一個「臺階」作爲參數：

$.fn.nextStep = function(step) { 
    elem = this.parent().children().eq(this.index() + step -1 -(this.index()%step)); 
    return elem.length ? elem : this.parent().children().last(); 
};

並使用它像這樣：

$(".test3").nextStep(4).addClass("hello");

Enhanced method demo

來源

2013-08-26 12:38:22 Brewal

尋找下一個被4整除的元素

回答

相關問題