.frontpush() jQuery Plugin
.frontpush(array)
Description
Places the matched set of elements at the front of an array.
Download the ZIP File with Source and Demo
Parameters:
- array: The array that will be manipulated
Due to scope issues, the JavaScript array method .unshift() sometimes fails to function properly. This is often followed by an error in FireBug stating .unshift() is not a function. Sometimes the scope issue is extremely difficult to find, and it’s easier to simply use this plugin to insert jQuery objects at the front of an array.
Demos
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="frontpush.jquery.js"></script>
<script type="text/javascript">
$(function(){
var boxes = $("#box1");
$(".box").frontpush(boxes);
console.log(boxes); //Outputs [div#box2.box, div#box3.box, div#box1]
});
</script>
</head>
<body>
<div id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
</body>
</html>
Download the ZIP File with Source and Demo
Related Posts:
About the Author:
Joseph, been a while sir! I have to say I’m a bit confused. First, your example puts it at the end of the so called array, not the beginning.
What the console log returns only acts like an array, it is not a real one though. What you want to do is something like this: (‘.box’)toArray().unshift(boxes);
That will turn what is returned into an actual array, and then place the box1 to the front.
Heya Jeremy. Actually it puts the elements right at front as intended. Notice that box1 is at the end of the console output, where it’s supposed to be. The wrapped element set is what’s placed at the beginning of the array (as stated in the description). If I wanted box1 to be at the front, I’d just use a normal push to send the class of .box to the back.
And for most practical purposes, this object/array is sufficient for most array manipulation needs. You can call an item by index (box[0]), making it easy to work with in for-loops or jQuery.each statements. I don’t see any need to cast it into an Array since the object acts so similar to it.
So I stumbled upon the .makeArray() build in method. It’s extremely powerful!
I guess I just don’t understand why you need a plugin, which adds an http request, to do something you can do with 1 line of code. Your plugin seems to force something that is technically not an array, into one, and then places something into the front of it.
Maybe I am not getting the point of the plugin, but the toArray method will turn it into an array, and then you can unshift() all you want. The reason you were getting the error is because you were trying to use unshift() – which is an array method, on something that was not an array. The matched elements that get returned act like one and show like one in console log, but it is not.
Thanks for stopping by again Jeremy.
This plugin is part of our custom library, and we don’t expect it to be loaded on its own.
I don’t know how much you’ve actually worked with the unshift method while also working with jQuery. If you have actually used it a lot, you would know that even in the exact same scope and context of the push() array method, unshift can fail, for no apparent reason that I can think of. I attempted to use toArray and then unshift like you suggested, but the console still states that unshift is not a function. Your explanation of unshift failing because it’s not being called on an array is incorrect. Push and splice, array methods, work on the jQuery object just fine. Unshift, however, fails. This is simply my workaround. I do realize that what is being returned is not consistent across the elements: I’ve fixed that and I’m about to upload the adjustments. Thanks for helping me notice that.
Thanks a lot for your feedback Jeremy, you know your expertise is always welcomed here
Thank you sir…and that is weird that you got the error. Always learnin!