javascript - Finding the next element divisible by 4 - Stack Overflow

admin管理员组

文章数量:1435823

So I have a list of elements like so;

<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>

And essentially I need to figure out what is the next element relative to the selector whose order is divisible by four, counting from the beginning. If there aren't enough elements relative to selector, the last element would be returned. Ergo, I'd get the following sort of results;

$(".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>

How would I achieve this?

So I have a list of elements like so;

<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>

And essentially I need to figure out what is the next element relative to the selector whose order is divisible by four, counting from the beginning. If there aren't enough elements relative to selector, the last element would be returned. Ergo, I'd get the following sort of results;

$(".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>

How would I achieve this?

• javascript
• jquery

Share Improve this question Follow asked Aug 26, 2013 at 12:27 Emphram StavangerEmphram Stavanger 4,22499 gold badges3838 silver badges6666 bronze badges 9

• 2 w3schools./cssref/sel_nth-child.asp – Joum Commented Aug 26, 2013 at 12:29
• 1 ^^ His link is irrelevant – Zach Saucier Commented Aug 26, 2013 at 12:29
• 1 @Joum: w3fools. – Alix Axel Commented Aug 26, 2013 at 12:29
• is this better?: w3/TR/css3-selectors/#nth-child-pseudo – Joum Commented Aug 26, 2013 at 12:31
• 1 @Joum just see it you will know it. – Dipesh Parmar Commented Aug 26, 2013 at 12:32

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 7

If you want to use it as a function after a selecter, you could prototype something:

// 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
}

I've changed my answer after Crazytrain pointed out the question was not to move 4 elements, but to move to the next item dividable by 4. Starting from 2 that would make 4, not 6

---

I'll keep the following selector to show how to move 4 spots, but it isnt the asnwer to this question: CSS has a nth selector which is usable in jQuery:

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

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/zZVax/1/

In plement to Crazy Train, you can create a jQuery method to use it like in your examples :

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

edit : note it has to be + 3 to work as you expected. I also added a piece of code to return the last element if none has been found.

See the Demo jsFiddle

To be more flexible, you can also pass a "step" as parameter :

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

And use it like so :

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

Enhanced method demo

本文标签： javascriptFinding the next element divisible by 4Stack Overflow