Js - A more elegant / efficiant way of finding nth element in DOM than if-else

Question

I need to move an element one level up in dom ...

So I made :

  jQuery(document).ready(function() {

  jQuery('.pricing-table .fancy-header').each(function() {
    jQuery(this).parent().before(this);
        })  

 });

and Also this is ok ..

var $node = jQUery('.pricing-table .fancy-header');
           jQuery($node).parent().before($node);
     })

And it works great ( http://jsfiddle.net/obmerk99/EdvTz/ ) , my problem is , that on some specific page loads, I might have 2 different .fancy-header elements and I need to move the first one UP and the second one DOWN ..

See Fiddle : http://jsfiddle.net/obmerk99/EdvTz/3/

Now , apart from some probable syntax mistake that makes it fail ( but that I can probably manage ) , my question is more about finding a more elegant and/or efficient way of doing so than a primitive if-else statement .

Is there such a way in jQuery ?

You start by asking for "efficient", but end by asking for "elegant". Which one are you ultimately after? — Blue Skies, Dec 07 '13 at 03:55
@BlueSkies Well, since semantic is so important ,and you have indeed caught that - than seeing BOTH and the differences between them would be great. edited accordingly . — Obmerk Kronen, Dec 07 '13 at 03:56
what you have is about as clean as you can get http://stackoverflow.com/questions/6383941/jquery-move-node-out-of-its-parent — actual_kangaroo, Dec 07 '13 at 03:59
@Eru - Thanks - but I was referring more to the `if-else` statement . — Obmerk Kronen, Dec 07 '13 at 04:00
@ObmerkKronen: FYI, you can add a `$` (or any valid name you want) as a parameter to the `.ready()` callback, and safely use it inside the callback as a reference to `jQuery`. — Blue Skies, Dec 07 '13 at 04:06
@BlueSkies - That I know . But this code goes inside wordpress, which is notorious for not wanting to parse the `$` under some conditions ( it loads in safe mode i think )... I am just used to write the whole `jQUery` reference :-) But thanks again .. — Obmerk Kronen, Dec 07 '13 at 04:10
Ah, yeah I think I remember hearing that they use an old version. — Blue Skies, Dec 07 '13 at 04:11
Nop - now it is the new(est ?? ) . But I was developing WP since 1.5 . So I am just used to automatically write the whole name. I was not even aware that that "problem" is fixed in newer jQuery versions as opposed to the old ones :-) How much can one learn :-) — Obmerk Kronen, Dec 07 '13 at 04:13

Blue Skies · Accepted Answer · 2013-12-07T04:13:44.093

1

"Elegant" is subjective, but here's a short approach anyway.

jQuery('.pricing-table .fancy-header').each(function (i) {
    jQuery(this).parent()[i ? "after" : "before"](this);
});

Since you'll only have one or two matches, we just use the counter to select either the "after" (if 1) or "before" (if 0) method.

But for clarity, an if statement may be better. You can still use the i counter.

jQuery('.pricing-table .fancy-header').each(function (i) {
    if (i)
        jQuery(this).parent().after(this);
    else
        jQuery(this).parent().before(this);
});

And here's efficient if that really matters (guessing not):

jQuery('.pricing-table .fancy-header').each(function (i) {
    var par = this.parentNode;
    par.insertBefore(this, i ? par.nextSibling : par);
});

edited Dec 07 '13 at 04:13

answered Dec 07 '13 at 03:57

Blue Skies

2,935
16
19

I might also have `zero` or `NO` element – Obmerk Kronen Dec 07 '13 at 03:58
+1, but this code needs a source code comment to communicate its intent. – goat Dec 07 '13 at 03:59
1

@ObmerkKronen: If there are no matches, then the `.each()` callback never runs. – Blue Skies Dec 07 '13 at 04:01
Ok . The first method ( "Elegant" ) I understand - and it is really great ! . The second however , is beyond my understanding ( both code, and as for it´s "efficiency" ) :-) – Obmerk Kronen Dec 07 '13 at 04:03
@Blue Skies - +1 .. I was too fast to comment. – Obmerk Kronen Dec 07 '13 at 04:03
1

@ObmerkKronen: The second one is using the native DOM API instead of jQuery. As such, it'll run much faster, but for this purpose, you'll never notice. – Blue Skies Dec 07 '13 at 04:03
Great . simple ternary operator. Now I know how to implement in jQuery ( I always only use it in PHP ) .Thanks again.. – Obmerk Kronen Dec 07 '13 at 04:07
For the efficient method, if you wanted to improve it even more, you'd lose the `$().each` and use a for loop as this [jsPerf](http://jsperf.com/browser-diet-jquery-each-vs-for-loop) shows would be faster. – Code Maverick Dec 07 '13 at 04:13
@ObmerkKronen - Edited =D – Code Maverick Dec 07 '13 at 04:22

Js - A more elegant / efficiant way of finding nth element in DOM than if-else

1 Answers1