id를 전달하여 jQuery의 XML을 구문 분석하십시오.

Question

xml 블록 4 개를 가지고 있는데, whith jQuery를 구문 분석하여 하나의 아약스 호출을 만들고 싶습니다. 이제 xml의 네 블록은 서로 다릅니다 (그러나 구조는 동일합니다). 각 xml 블록에 ID를 전달하여이 xml을 구문 분석하려고합니다. 그러나 아약스 함수에 전달하기 위해 캡처해야하는 첫 번째 항목이므로 내 아약스 호출에서는 id 특성을 회수 할 수 없습니다.

XML은 여기에 있습니다 : :

나는 이런 식으로 뭔가를 시도

 <dropdown> 
      <test id="1"> 
      <optionheading> 
       <heads>Heading 1</heads> 
          <value> 
            <values images='images/1.gif'>Option1</values> 
            <values images='images/2.gif'>Option2</values> 
            <values images='images/3.gif'>Option3</values> 
          </value> 
      </optionheading> 
    ..................................... 

    ............................ 
    </test> 
    <test id='2"> 
    <optionheading> 
       <heads id="b">H.................. 
    .................. 
    ............ 
    </test> 
</dropdown> 

내가 TEST1, TEST2의 ID를 얻을 필요가 등을-알

아약스가 여기에 있습니다 :

$("document").ready(function() { 
       $.ajax({ 
        type: "GET", 
        url:"dropdown.xml", 
        dataType: "xml", 
        success :function(xml) { 
         var select = $("#mySelect"); 
         //I am getting id here 
         var id=$(xml).find('test').attr('id'); 

         $(xml).find('test'+id).each(function() { 
          $(this).find('optionheading').each(function() { 
          var opthead = $(this).fin...................... 

Answer 1

잘 이해했다면 다음과 같이 처리해야합니다 (굵게 출력) :

• <test id="IDHERE"><option> 요소로 채워 <heads>
• 각 <optgroup>에서 정의 <select ID="IDHERE">
• <optionheading> 주어진 <values> 요소에 따른 라벨와 <optgroup>을 만들어야 채워야

아래 코드는 요청에 따라이 아이디어를 구현하는 jQuery 메서드입니다.

참고 : $('test', xml)은 $(xml).find('test')의 약자입니다.
주 2 : ID는 고유해야하므로 select#yourID은 #yourID과 같습니다.
주 3 :이 스크립트에는 XML의 <values> 태그가 필요하지 않습니다. 실행 한 후

success: function(xml){ 
    //Loop through each `<test>` 
    $('test', xml).each(function(test_index){ 
     var id = $(this).attr('id'); //Get the ID of the `<test>` 
     // Select <select> element with ID `ID` using the `select#ID` selector 
     var select = $('select#' + id); 
     $('optionheading', this).each(function() { 
      $('values', this).each(function(){ 
       var $values = $(this); 
       $('<option>') 
        .val($values.attr('images')) 
        .text($values.text()) 
        .appendTo(optgroup); 
      }); 
      $('<optgroup>') 
       .attr('label', $('heads', this).text()) 
       .appendTo(select); 
     }); 
    }); 
} 

가능한 HTML은 :

<select id='1'> 
    <optgroup label='Heading 1'> 
     <option value='images/1.gif'>Option1</option> 
     <option value='images/2.gif'>Option2</option> 
     <option value='images/3.gif'>Option3</option> 
    <optgroup> 
    .... 
</select> 
<select id="2"> 
    ...