I have a jQuery code like this:

$(this).next().next().next().next().html('<span>anything</span>');

Now I want to know is there any alternative for those .next() functions? (something like 4*next())

Note: .nextUntil() is not useful for me, Because I don't have any clue to use it in .nextUntil(). (My HTML structure is dynamic. In other word, it is not constant. Sometimes the final element is a span, and sometimes it is a div and so on ...)

Edit: Here is a few examples for my HTML structure:

example1:

<button>click it</button>
<div>div1</div>
<div>div2</div>
<span>span1</span>
<a>a1</a>              <!-- target !! and it should be <span>anything</span> -->
<div>div3</div>

example2:

<button>click it</button>
<span>span1</span>
<b>b1</b>
<span>span2</span>
<div>div1</div>       <!-- target !! and it should be <span>anything</span> -->
<div>div2</div>
<div>div3</div>

I have a jQuery code like this:

$(this).next().next().next().next().html('<span>anything</span>');

Now I want to know is there any alternative for those .next() functions? (something like 4*next())

Note: .nextUntil() is not useful for me, Because I don't have any clue to use it in .nextUntil(). (My HTML structure is dynamic. In other word, it is not constant. Sometimes the final element is a span, and sometimes it is a div and so on ...)

Edit: Here is a few examples for my HTML structure:

example1:

<button>click it</button>
<div>div1</div>
<div>div2</div>
<span>span1</span>
<a>a1</a>              <!-- target !! and it should be <span>anything</span> -->
<div>div3</div>

example2:

<button>click it</button>
<span>span1</span>
<b>b1</b>
<span>span2</span>
<div>div1</div>       <!-- target !! and it should be <span>anything</span> -->
<div>div2</div>
<div>div3</div>

• javascript
• jquery
• function

• @Mohamed-Yousef As I mentioned in the question, my HTML codes aren't identical all the time ...! So please give me a logic the same with that jQuery code. – Shafizadeh Commented Dec 7, 2015 at 2:28
• What tells you how many next()'s to add? – Nick Zuber Commented Dec 7, 2015 at 2:29
• @NickZ The number of next()s is constant. It is always 4 (for example). – Shafizadeh Commented Dec 7, 2015 at 2:37
• Maybe you just need some tagret practice. – Roamer-1888 Commented Dec 7, 2015 at 2:41
• @Roamer-1888 boooooo – Nick Zuber Commented Dec 7, 2015 at 2:43

2 Answers 2

You could bine the .nextAll()/.eq() methods:

$(this).nextAll().eq(3);

As a side note, the .eq() method accepts an index that is zero-based, which means that .eq(3) will select the fourth element.

Example:

$('div.nextAll span:first').nextAll().eq(3).addClass('selected');

$('div.multipleNext span:first').next().next().next().next().addClass('selected');

.selected {
  color: #f00;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nextAll">
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span>
</div>

<div class="multipleNext">
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span>
</div>

Alternatively, as pointed out in the ments, you could also use a bination of the general sibling binator, ~ and the :eq() selector:

$('~:eq(3)', this);

or:

$(this).find('~:eq(3)');

Example:

$('~:eq(3)', 'div.nextAll span:first').addClass('selected');

$('div.multipleNext span:first').next().next().next().next().addClass('selected');

.selected {
  color: #f00;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nextAll">
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span>
</div>

<div class="multipleNext">
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span>
</div>

Could use next siblings selector , :eq() . As noted by @JoshCrozier , .eq() and :eq() are 0-based indexed

$("~ :eq(3)", this)

$("button").click(function() {
  $("~ :eq(3)", this).html("<span>anything</span>")
})

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>click it</button>
<div>div1</div>
<div>div2</div>
<span>span1</span>
<a>a1</a>              <!-- target !! and it should be <span>anything</span> -->
<div>div3</div>