Get all ellements and attributes of an element root using jQuery

Question

I need to find all elements name in tag and all attributes in each element by using JQuery , each element has different attributes name and value i need to know this attributes name and value but don't know how

    <Circuit>
<C Type="Bipolar" Name="c1">
        <Cathode row="10" col="20"/>
        <Anode row="15" col="50"/>

    </C>
    <AND Name="and1">``
        <Input>
            <Pin row="10" col="40"></Pin>
            <Pin row="20" col="40"></Pin>
        </Input>
        <Output>
            <Pin row="30" col="50"></Pin>
        </Output>
    </AND>

    <Diode Name="d1" Value="30">
        <Anode row="30" col="50"></Anode>
        <Cathode row="40" col="60"></Cathode>
    </Diode>

<R Type="Constant" Name="r1">
    <Node row="60" col="80"></Node>
    <Node row="70" col="80"></Node>
</R>    
</Circuit>

I'll explain what i need, first need to know all elements (tag name) only in tag o/p like this elements in circuit tag C AND Diode R

after this need to know all attributes and elements in each element like this

first element (C) has 2 attribute first attribute is "Type" and the value of this attribute ="Bipolar" second attribute is "Name" and the value of this attribute ="c1" and has 2 elements Cathode Anode

and the same in each element

can you post some code which shows what you tried already (js code) ? — Luke, May 22 '14 at 23:40
And what output should that generate? Have you made any attempts so far? What went wrong? — David Thomas, May 22 '14 at 23:40
possible duplicate http://stackoverflow.com/a/5287305/576725 — Luke, May 23 '14 at 00:30

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

In jQuery there is the attribute matcher [attr], out of many other selectors

$("[Name]")

will get you all the elements that has the attribute Name

you can then loop through and get the actual name with jQuerys attr() function

$("[Name]").each(function() {
    console.log($(this).attr("Name"));
    console.log($(this).attr("Value"));
});

Edit

In the comments I found out that the question actually is how to serialize the whole structure into a data set. Therefore this might be a possible duplicate https://stackoverflow.com/a/5287305/576725

edited May 23 '17 at 12:05

Community

1
1

answered May 22 '14 at 23:42

Luke

8,235
3
22
36

does the `this` scope of an element always contain every single attribute? – Luke May 22 '14 at 23:48
thanks for help but, I know this attributes name only in run time so i can't use this answer cause i don't know element attributes name – EmanAli May 23 '14 at 00:08
i need output like dictionary which contains attribute name and attribute value – EmanAli May 23 '14 at 00:10
I think you are searching for some deserializer that deserializes all your contents into a dataobject. – Luke May 23 '14 at 00:13
@Luke you mean, i can't do what i need by using JQuery ? – EmanAli May 23 '14 at 00:27
i'll explain what i need, frist need to know all elements (tag name) only in tag o/p like this elements in circuit tag C AND Diode R after this need to know all attributes and elements in each element like this frist element (C) has 2 attribute frist attribute is "Type" and the value of this attribute ="Bipolar" second attribute is "Name" and the value of this attribute ="c1" and has 2 elements Cathode Anode and the same in each element you understand what i need ? – EmanAli May 23 '14 at 00:40

score 0 · Answer 2 · edited May 23 '17 at 12:20

The following prior question shows how to get all the attributes of an element using JavaScript. The same, and the elements can be obtained using jQuery:

Get all Attributes from a HTML element with Javascript/jQuery

So that your code works cross-browser define your xml variable as follows:

var xml = $( $.parseXML( 'XML-String' ) );

You can the get all the elements and attributes as follows:

var all = xml.find('*').map(function(v,i) {
    var ux = {};
    $.each( this.attributes, function(index, node) {
         ux[ node.nodeName ] = node.nodeValue;
    });
    return $.extend({}, { nodeName: this.nodeName }, {attributes:ux});
})
.get();

Which should give you output that looks like:

[{"nodeName":"Circuit","attributes":{}},{"nodeName":"C","attributes":{"Type":"Bipolar","Name":"c1"}},{"nodeName":"Cathode","attributes":{"row":"10","col":"20"}}, ....... .. .. .. ]

JS FIDDLE DEMO

Get all ellements and attributes of an element root using jQuery

2 Answers2

Edit