使用JQuery解析XML，需要通過屬性名稱

Question

我試圖解析一些XML數據在一個基本的網頁顯示找到。 XML如下：

<response> 
    <variable name = "Input1">False</variable> 
    <variable name = "Input2">False</variable> 
    <variable name = "Input3">False</variable> 
    <variable name = "Input4">False</variable> 
    <variable name = "Input5">False</variable> 
    <variable name = "Input6">False</variable> 
    <variable name = "Input7">False</variable> 
    <variable name = "Input8">False</variable> 
</response> 

我有一些代碼是顯示，但目前我得到所有8個變量顯示在1個文本區域。

 $(document).ready(function() 
     { 
      $.ajax({ 
      type: "GET", 
      //To change controller, please chnage the IP below. 
      url: "http://172.20.2.17/query/variable?Input1&Input2&Input3&Input4&Input5&Input6&Input7&Input8", 
      dataType: "xml", 
      success: parseSystem 

      }); 
     })  
     //Parse System XML Response 
     function parseSystem(xml) 
{ 

    $(xml).find("response").each(function() 
    {  

     $("#Input1").append($(this).find("variable").text()) 
    $("#Input2").append($(this).find("variable").text()) 
    $("#Input3").append($(this).find("variable").text()) 
    $("#Input4").append($(this).find("variable").text()) 
    $("#Input5").append($(this).find("variable").text()) 
    $("#Input6").append($(this).find("variable").text()) 
    $("#Input7").append($(this).find("variable").text()) 
    $("#Input8").append($(this).find("variable").text()) 
    }); 

我想要的是在XML中的Input1鏈接到HTML中的＃Input1等等。

謝謝您的時間，它是真正的讚賞。

Answer 1

$(xml).find("response").each(function() 
    {  

    $("#Input1").append($(this).find("variable[name=Input1]").text()) 
    $("#Input2").append($(this).find("variable[name=Input2]").text()) 
    $("#Input3").append($(this).find("variable[name=Input3]").text()) 
    $("#Input4").append($(this).find("variable[name=Input4]").text()) 
    $("#Input5").append($(this).find("variable[name=Input5]").text()) 
    $("#Input6").append($(this).find("variable[name=Input6]").text()) 
    $("#Input7").append($(this).find("variable[name=Input7]").text()) 
    $("#Input8").append($(this).find("variable[name=Input8]").text()) 
    }); 

，但還有一個更靈活的功能：

$(xml).find("response").each(function(){ 
    $(this).find("variable").each(function(){ 
      var id = $(this).attr("name"); 
      $("#"+id).append($(this).text()) 
    }); 
}); 

Answer 2

$(xml).find('response').each(function (index, element) { 
    var $element = $(element); 
    var $variables = $('variable', $element); 
    $variables.each(function (index, variable) { 
     var $variable = $(variable); 
     var controlId = $variable.attr('name'); 
     var text = $variable.text(); 
     var $control = $('#' + controlId); 
     $control.append(text); 
    }); 
});