And just a final note on performance, as Stephan points out, the for
loop is faster than $.each, likewise accessing the elements by array
index is quite a bit (~7x) faster than using eq() --
For 5 p elements (average time):
Using .eq(): 0.14ms and 20 calls
Using array index: 0.02ms 2 calls/4 calls (2 on the first & last)
Depending upon how many elements you may be operating on, the time
difference could become important.
On Feb 9, 1:51 pm, mkmanning <michaell...@gmail.com> wrote:
> Silently for text(), but it returns null for html() (using Adrian's
> second example/my example) so you'll most likely want to check for
> that.
>
> On Feb 9, 1:23 pm, Ricardo Tomasi <ricardob...@gmail.com> wrote:
>
> > You can take advantage of the index passed to each. What you posted is
> > very close to working:
>
> > $(function() {
> > var divs = $("div");
> > divs.each(function(i){
>
> > var prev = divs.eq(i-1).text();
> > var next = divs.eq(i+1).text();
>
> > alert(prev + " - " + next);
> > });
>
> > });
>
> > There's no need to check for the existance of a previous/next element,
> > as jQuery fails silently.
>
> > cheers,
> > - ricardo
>
> > On Feb 9, 5:25 pm, Stephan Veigl <stephan.ve...@gmail.com> wrote:
>
> > > 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?
