1

I've found myself in a situation where I'm given an NodeList that I'm trying to drop into a jQuery object to manipulate. The problem is that array also includes text nodes, comment nodes, etc, and seems to confuse jQuery when you just say $(nodeList).

I've used underscore to make a quick clean function that strips out the DOM elements and returns them as an array:

_.mixin({
    clean: function(nodeList) {
        return _(nodeList).filter(function(node) {
            return node.nodeType == 1;
        });
    }
});

with this $(_(nodeList).clean()) gives me a usable jQuery object.

Is there a better way to go about this?

Thanks.

nicholas
  • 14,184
  • 22
  • 82
  • 138
  • @jfriend00 it's part of underscore.js (http://underscorejs.org). Also, OP, try http://codereview.stackexchange.com/ – Polyov Aug 06 '12 at 03:25
  • Is this an underscore question or a jQuery question? The OP references jQuery in the question, but includes both in the tags. – jfriend00 Aug 06 '12 at 03:48
  • @jfriend00 it's a "how do I strip all but element nodes from a NodeList?" question. – nicholas Aug 06 '12 at 05:31
  • @SomekidwithHTML I'm not really looking for a review of my solution. I feel like I shouldn't need to be doing this at all is the thing. I included my underscorejs mixin to illustrate the problem more than show off the solution. – nicholas Aug 06 '12 at 05:37

2 Answers2

0

I'm really not sure what question you're asking, but here is a working jQuery implementation that filters out non-elements from a jQuery object:

jQuery.fn.clean = function() {
    return this.filter(function() {
        return(this.nodeType == 1);
    });
}

var nodes = document.getElementById("container").childNodes;
var $elements = jQuery(nodes).clean();

And, a working demo: http://jsfiddle.net/jfriend00/RV6H7/

jQuery has an internal function that does this type of operation, but I'm not aware of any built-in public method that does so.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Thanks. Putting it in jQuery is probably better, but my question is: doesn't jQuery do this already? My little 2 line function seems incredibly simplistic. Is that really the best way to do this? – nicholas Aug 06 '12 at 06:14
  • @nicholas - jQuery objects are allowed to contain non-elements and some jQuery methods do that. I'm not aware of a built-in jQuery method that takes a `nodeList` and filters it to an `elementList`, though many internal functions do their own filtering since most jQuery functions return only elements, but a lot of DOM iteration iterates all nodes, not just elements. I don't know of a better way to do what you asked in jQuery if you already have a `nodeList`. – jfriend00 Aug 06 '12 at 06:23
  • @nicholas - I should add that if you do a normal jQuery selector operation, it will return only elements (doing it's own filtering internally). But, you said you're starting with a `nodeList`, not a selector operation which isn't how jQuery is normally used which is likely why it doesn't do that filtering automatically. – jfriend00 Aug 06 '12 at 06:27
0

How about simply: jQuery( nodelist ).filter( '*' )?

This will filter away everything but the element nodes using nothing but vanilla jQuery.

cueedee
  • 1,473
  • 1
  • 14
  • 17