jqueryを使用してxmlの子ノードをトラバースする

Question

このコンセプトは非常に新しく、以下の要件を満たすのに苦労しています。

javascript変数に「detailJSTotal」という名前の以下のxmlオブジェクトがあります。

<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> 

ここでルート要素（応答）は、複数< div>要素を含みます。各< div>要素は、< label>要素とその値と< a要素を含みます。

<の値は、<のラベル> 'ID'の値が< div>の要素の "onclick"属性を取得することです。

例：

私は>「812161」のように値をID <ラベルを提供することにより、<>要素の「onclickの」属性の値を取得したいことがあります。上記の例では、戻り値は「text4.xml」である必要があります。

Answer 1

JqueryのxmlParserを試してください。この

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>

Answer 2

だけでjQueryを介して、あなたのxmlを読み込む：

var $xml = $(detailJSTotal); 

あなたは今jQueryのはすべてのjQueryの関数を使用して、あなたが必要なすべての情報を選択することができます。例えば はfind()を使用します。

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

注：テストされていない、ちょうど私の頭の外に書かれました。