提取使用$就功能

Question

朋友你好我是jQuery的新嘗試開發一個Ajax的功能，幫助我從XML文件中的數據讀取到下面我的html文件，從XML文件中的數據是我的代碼

HTML

<div id="myDiv"></div> <button>Get info</button> 

XML修訂版*

<?xml version="1.0" encoding="utf-8"?> 
<main><person> 
    <name>Bhupesh</name> 
    <last>Lohani</last> 
</person> 
<person> 
<name>Kamal</name> 
<last>Sandhu</last> 
</person> 

<person> 
<name>Ravi</name> 
<last>Kumar</last> 
</person></main> 

SCRIPT修訂版*

$(document).ready(function(e) { 
    $("button").click(function(){ 
       var htmlStr = ''; 
       $.ajax({ 
         type:'get', 
         url:"xml.xml", 
         cache: false, 
         dataType: "xml", 
         success:function(result){       
           var main = $(result).find('main'); 
           $(main).each(function(index) { 
            var person = $(this).find('person') 
             var name = $(person).find('name').text(); 
             var lastName = $(person).find('last').text(); 
             //console.log(name + ' | ' + lastName); 
             htmlStr += '<p><b>' + name + '</b> - ' + lastName + '</p><br/>'; 
           }); 
           $("#myDiv").append(htmlStr); 
         }}); 
     }); 
}); 

它不顯示任何當我點擊我的按鈕，請幫我傢伙

UPDATE

朋友我已經做了我的代碼一些修改，現在它的shoing像

BhupeshKamalRavi - LohaniSandhuKumar 

我想每個姓氏和名字都應該顯示爲

Bhupesh - Lohani 
Kamal - Snadhu 
Ravi - Kumar 

請幫助我的朋友

在此先感謝.. :)

Answer 1

檢查htmlStr變量的作用域。它只在每個回調方法中。您需要在每個回調範圍外定義它。可以在主變量下面定義它。

var main= ... ; 
var htmlStr = ''; 

根據您的更新請求。我發現你不是迭代人，你只是迭代'main'。 $（main）.find（'person'）將導致將兩個person元素分配給'person'變量。隨後，$（person）.find（'name'）導致從兩個人元素中獲得名字。

您可以通過迭代人來快速解決此問題。

 var main = $(result).find('main'); 
     var htmlStr = ''; 

     $('person', main).each(function (index) { 
      var person = $(this); 
      var name = $(person).find('name').text(); 
      var lastName = $(person).find('last').text(); 
      console.log(name + ' | ' + lastName); 
      htmlStr += '<p><b>' + name + '</b> - ' + lastName + '</p><br/>'; 
     }); 
     $("#myDiv").append(htmlStr);