Hi Adrian,
as mkmanning already said, when you want to get the next / prev
element from the same selector, simply access the array.
In this case I prefer a for (var i=0; i<ps.length; i++) {...} loop
instead of the $.each for performance reasons and readability, but
that's personal taste.
by(e) :-)
Stephan
2009/2/9 mkmanning <michaell...@gmail.com>:
>
> $("p") is an array, so you could just use the index:
>
> var ps = $("p"); //cache
> ps.each(function(i,d) {
> var prevP = i>0?$(ps[i-1]):false; /* however you want to deal with
> there not being a prev */
> var nextP = i<ps.length-1?$(ps[i+1]):false; /* however you want to
> deal with there not being a next */
> if(prevP){
> console.log($(prevP).html());
> }
> if(nextP){
> console.log($(nextP).html());
> }
> //if you only want p's that have a prev AND next, you can do this
> if(i>0 && i<ps.length-1){
> console.log( $(ps[i-1]).html() + ', ' + $(ps[i+1]).html() );
> }
> });
>
>
> On Feb 9, 8:55 am, Adrian Lynch <adely...@googlemail.com> wrote:
>> This explains better what I'm after:
>>
>> $("p").each(function(i) {
>> var prevP = $(this).parent().prev().children("p");
>> var nextP = $(this).parent().next().children("p");
>> console.info(prevP.html());
>> console.info(nextP.html());
>>
>> });
>>
>> <div>
>> <p>1</p>
>> <div>
>> <span>This is next</span>
>> </div>
>> </div>
>> <div>
>> <div>
>> <span>This is previous</span>
>> </div>
>> <p>2</p>
>> </div>
>> <div>
>> <p>3</p>
>> </div>
>>
>> I want to refer to the next p in the each() loop but $(this).next()/
>> prev() refers to the next sibling element in the DOM.
>>
>> So in the example above I'm having to go out to the parent, then get
>> the next/previous, then come in to get the p I want.
>>
>> Now I'm wondering if there's a generic way to do this...
>>
>> By(e) <-----<< see!
>> Adrian
>>
>> On Feb 9, 4:44 pm, Adrian Lynch <adely...@googlemail.com> wrote:
>>
>> > That's what I was hoping for, but next() and prev() act on the next
>> > and previous elements in the DOM, not in the nodes you're looping
>> > over. To demonstrate:
>>
>> > $("p").each(function(i) {
>> > console.info($(this).next().html());
>> > console.info($(this).prev().html());
>>
>> > });
>>
>> > <form action="test.cfm" method="post">
>> > <div>
>> > <p>1</p>
>> > <div>
>> > <p>This is next</p>
>> > </div>
>> > </div>
>> > <div>
>> > <div>
>> > <p>This is previous</p>
>> > </div>
>> > <p>2</p>
>> > </div>
>> > <div>
>> > <p>3</p>
>> > </div>
>> > </form>
>>
>> > Maybe I have to come out to the outer most divs before calling next()/
>> > prev() on it.
>>
>> > Adrian
>>
>> > On Feb 4, 4:16 pm, Stephan Veigl <stephan.ve...@gmail.com> wrote:
>>
>> > > Hi,
>>
>> > > there are prev() and next() functions doing exactly what you need:
>>
>> > > $("div").each( function() {
>> > > var prev = $(this).prev();
>> > > var next = $(this).next();
>> > > alert( prev.text() + "-" + next.text() );
>>
>> > > });
>>
>> > > (I've skipped the extra code for the first and last element for
>> > > simplicity.)
>>
>> > > by(e)
>> > > Stephan
>>
>> > > 2009/2/4AdrianLynch<adely...@googlemail.com>:
>>
>> > > > Hey all, I'm loop over some nodes witheach() and I need to look at
>> > > > the next and previous elements for the current iteration.
>>
>> > > > <script type="text/javascript">
>> > > > $(function() {
>> > > > $("div").each(function(i) {
>> > > > var prev = [SELECTOR FOR PREVIOUS DIV].text();
>> > > > var next = [SELECTOR FOR NEXT DIV].text();
>> > > > alert(prev + " : " + next);
>> > > > });
>> > > > });
>> > > > </script>
>>
>> > > > <div>1</div>
>> > > > <div>2</div>
>> > > > <div>3</div>
>>
>> > > > Will I have to store a reference to the divs and access it with i in
>> > > > the loop like this:
>>
>> > > > <script type="text/javascript">
>> > > > $(function() {
>>
>> > > > var divs = $("div");
>>
>> > > > divs.each(function(i) {
>>
>> > > > var prev = "";
>> > > > var next = "";
>>
>> > > > if (i > 0)
>> > > > prev = $(divs.get(i - 1)).text();
>>
>> > > > if (i < divs.size() - 1)
>> > > > next = $(divs.get(i + 1)).text();
>>
>> > > > alert(prev + " - " + next);
>>
>> > > > });
>> > > > });
>> > > > </script>
>>
>> > > > <div>1</div>
>> > > > <span>Spanner in the works</span>
>> > > > <div>2</div>
>> > > > <span>Don't select me!</span>
>> > > > <div>3</div>
>>
>> > > > Is next() the answer maybe?
