提取使用$就功能

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