如何在不使用jQuery find（）的情况下优雅地读取此DOM对象元素？

Question

I got some xml data, parsed it into a dom object so i can search and get values using jQuery.

Something like this:

<field>
    <name>Jesus</name>
    <group>God</group>
    <blah>Hello World</blah>
</field>

In my js, I used an each() to loop through the field:

data.find('field').each(function() {
    $(this).find("group").text();
}

I could use find() to fetch each field and content, but I don't want to use find as it could get expensive. I looked through the jQuery API i don't think i there is a function that could let me do something like " getElement('name') " or children('name') or next('name') , etc...

I don't want to use index either such as $(this)[0].childNodes[0] due to readability and potential future changes.

Any idea?

Answer 1

I'll give you an answer that doesn't use jQuery at all! How's that?

Your problem seems to be searching through the XML structure. So you converted it to a DOM tree, but now you're worried about the performance issues of traversing the tree.

The solution is simple: don't convert your XML to HTML, convert it to a JavaScript object literal, and work with that. It'll be the most simple AND the most efficient. For reference to convert XML to an object literal: XML to JavaScript Object

Now you are free to use all the tools JavaScript offers to work with your data, and you avoid any jQuery/DOM efficiency problems.

Answer 2

function alertit(jqueryObject) {
      if (jqueryObject.length === 0) return;

      jqueryObject.each(function() {
          alert(this.nodeName.toLowerCase());
      });

      alertit(jqueryObject.children());
    }

    alertit($(xml));

Answer 3

also try this

var xmlData = "<field><name>Jesus</name><group>God</group><blah>Hello World</blah></field>";
$(document).ready(function () {
    var data = $.parseXML(xmlData);
    $(data).each(function (i, node) {
        alert($(node).text());
    });
});