Traversing through child nodes of xml using jquery

Question

I am very new to this concept and struggling to achieve the below requirement.

I have the below xml object in my javascript variable named "detailJSTotal".

<response>
<div>
    <p>
        <label>
            ID:
        </label>
        812161
    </p>
    <p>
        <label>
            Name:
        </label>
        252
    </p>
    <a href="javascript:void(0)" onclick="text4.xml">
        more...
    </a>
</div>
<div>
    <p>
        <label>
            ID:
        </label>
        812162
    </p>
    <p>
        <label>
            Name:
        </label>
        252
    </p>
    <a href="javascript:void(0)" onclick="test2.xml">
        more...
    </a>
</div>
<div>
    <p>
        <label>
            ID:
        </label>
        812163
    </p>
    <p>
        <label>
            Name:
        </label>
        252
    </p>
    <a href="javascript:void(0)" onclick="text.xml">
        more...
    </a>
</div>
<div>
    <p>
        <label>
            ID:
        </label>
        812164
    </p>
    <p>
        <label>
            Name:
        </label>
        252
    </p>
    <a href="javascript:void(0)" onclick="test1.xml">
        more...
    </a>
</div>

Here root element (response) contains multiple < div > elements. Each < div > element contains < label > element and it's value and < a > element.

My requirement is to get the value of < a > element's "onclick" attribute for a given < label > 'ID' value of a < div > element.

Example:

I may want to get the value of "onclick" attribute of < a > element by providing the ID < label > value as '812161'. The return value should be "text4.xml" in the example above.

Answer 1

Just load your xml via jQuery:

var $xml = $(detailJSTotal);

You can now use jQuery all jQuery-functions and select all information you need. For example use find() :

var $label = $xml.find('label:contains("test")');
return $label.next('a').attr('onclick');

Note: Untested and just written out of my head.

Answer 2

Try Jquery's xmlParser ; like this

 var detailJSTotal= `<response> <div> <p> <label> ID: </label> 812161 </p> <p> <label> Name: </label> 252 </p> <a href="javascript:void(0)" onclick="text4.xml"> more... </a> </div> <div> <p> <label> ID: </label> 812162 </p> <p> <label> Name: </label> 252 </p> <a href="javascript:void(0)" onclick="test2.xml"> more... </a> </div> <div> <p> <label> ID: </label> 812163 </p> <p> <label> Name: </label> 252 </p> <a href="javascript:void(0)" onclick="text.xml"> more... </a> </div> <div> <p> <label> ID: </label> 812164 </p> <p> <label> Name: </label> 252 </p> <a href="javascript:void(0)" onclick="test1.xml"> more... </a> </div></response>`; xmlDOM = $( $.parseXML( detailJSTotal) ); function getAttrForID(id){ console.log($($(xmlDOM).find("p:contains(" + id + ")").siblings("a")[0]).attr("onclick")); return $($(xmlDOM).find("p:contains(" + id + ")").siblings("a")[0]).attr("onclick"); } console.log(getAttrForID("812161")); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>