выберите coressponding следующего дочерний элемент

Question

У меня есть следующие HTML

<div id="test"> 
<p class="one"></p> <---first one-----> 
<p class="two"></p> 
<p class="three"></p> 
<p class="four"></p> 
<p class="one"></p> <---second one----> 
<p class="two"></p> 
<p class="three"></p> 
<p class="four"></p> 
<p class="one"></p> <--- third one-----> 
<p class="two"></p> 
<p class="three"></p> 
<p class="four"></p> 
</div> 

Хорошо, теперь я сначала .one class тогда я хотел бы, чтобы выбрать следующий .one class и снова, если я во вторых один, то я хотел бы выбрать следующий .one class из этого. Я думаю, что нет :next-child что-то вроде этого .one:next-child, так как я мог это сделать?

---

обновление

@chopper ответ в порядке! но если он не может найти следующий, то он должен выбрать первый one

Answer 1

Используйте JQuery .next() селектор:

var secondOne = firstOne.next('.one'); 

EDIT: @KevinB правильно, правильный ответ

var secondOne = firstOne.nextAll('.one:first'); 

или

var secondOne = firstOne.nextAll('.one').first(); 

Answer 2

Я не уверен, что вы пытаетесь. если вы хотите следующий .one, вы можете просто использовать селектор.

p.one ~ p.one ~ p.one{ 
    background-color: green; 
} 

Working fiddle

Например, если вы хотите второй .one затем сделать так:

p.one ~ p.one { 
    /* apply styles */ /* selects all sibling elements */ 
} 

p.one ~ p.one ~ p.one{   /* overriding css styles */ 
    /* apply default styles */ /* selects all other sibling elements leaving the second element */ 
} 

Working fiddle (по наведению)