jQuery를 사용하여 XML 파일에서 데이터 표시

다음과 같은 XML 파일에 A - B - C - D - etc & hellip 형식의 문자 및 단어 정의가 포함되어 있습니다. 내가 B을 클릭하면jQuery를 사용하여 XML 파일에서 데이터 표시

<container> 
    <data name="apple" definition="A sweet fruit. bla bla bla"/> 
    <data name="bat" definition="bla bla bla"/> 
    <data name="book" definition="bla bla bla"/> 
    <data name="cat" definition="bla bla bla"/> 
    <data name="cup" definition="bla bla bla"/> 
</container>

는 박쥐 및 상자에 책을로드해야합니다. 책을 클릭하면 관련된 정의가 오른쪽 영역에 표시됩니다. jQuery를 사용하여이 기능을 만들려면 어떻게해야합니까?

출처

2011-08-05 learner

은 HTML이 같은 경우 :

<div class="search" data-letter="a">A</div> 
<div class="search" data-letter="b">B</div> 
<div class="search" data-letter="c">C</div> 
<div class="search" data-letter="d">D</div> 
<div id="results"></div>

그리고 자바 스크립트 : 이것은 당신에 대해 무엇을 요구해야

$(function(){ 

    var xml_data; 

    // Load the XML 
    $.get("your_xml_file.xml", function(data){ 

     xml_data = $(data); 

     // On click of search buttons 
     $(".search").bind("click", function(){ 

      // Clear the results div 
      $("#results").html(""); 

      // Get the desired letter 
      var letter = $(this).data("letter"); 

      // Loop through each result which has name attribute beginning with letter 
      xml_data.find("data[name^='"+letter+"']").each(function(k, v){ 

       // Append definition to results 
       $("#results").append($(this).attr("definition") + "<br/>"); 
      }); 

     }); 

    }); 

});

출처

2011-08-05 12:24:02 betamax

jquery는 XML을 사용할 수 있습니다. each 함수를 사용하여 XML을 반복하고 그로부터 페이지 구조를 만들어야 할 필요가 있습니다.

출처

2011-08-05 12:22:42 Eonasdan

당신은 문자열에서 XML로드하는 경우 :

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Title</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <style type="text/css"> 
     ul ul, span { 
      display:none; 
     } 
    </style> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      var xml = '<container><data name="apple" definition="A sweet fruit. bla bla bla"/><data name="bat" definition="bla bla bla"/><data name="book" definition="bla bla bla"/><data name="cat" definition="bla bla bla"/><data name="cup" definition="bla bla bla"/></container>'; 
      var xmlDoc = $.parseXML(xml); 
      var $xml = $(xmlDoc).find('container'); 
      var letters = new Object(); 

      // loop through all the definitions 
      $xml.children().each(function(k, v) { 
       var letter = $(v).attr('name').charAt(0); 

       // only add letters not already added 
       if (!letters[letter]) { 
        $('#definitions') 
         .append('<li><a href="#" id="' + letter + '">' + letter + '</a><ul></ul></li>'); 
        letters[letter] = 'f'; 
       } 

       // append definitions 
       $('#definitions a#' + letter + ' + ul').append('<li><a href="#">' + $(v).attr('name') + '</a><span> - ' + $(v).attr('definition') + '</span></li>'); 
      }); 

      // bind click events on the letters to show/hide the words 
      $('#definitions li > a').click(function() { 
       $(this).next('ul').toggle(); 
       return false; 
      }); 

      // bind click events on the words to show/hide the definitions 
      $('#definitions ul li a').click(function() { 
       $(this).next('span').toggle(); 
       return false; 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <h1>Defintions</h1> 
    <ul id="definitions"></ul> 
</body> 
</html>

또는 당신이 AJAX를 통해로드하는 경우와 자바 스크립트를 교체 :

$(function() { 
    var $xml; 
    var letters = new Object(); 

    if ($xml == null) { 
     $.ajax({ 
      url : 'definitions.xml', 
      dataType : 'xml', 
      success : function (xml) { 
       $xml = $(xml).find('container'); 
       console.log($xml); 
       $xml.children().each(function(k, v) { 
        var letter = $(v).attr('name').charAt(0).toUpperCase(); 

        // only add letters not already added 
        if (!letters[letter]) { 
         $('#definitions') 
          .append('<li><a href="#" id="' + letter + '">' + letter + '</a><ul></ul></li>'); 
         letters[letter] = '.'; // store this key in the map (no actual value) 
        } 

        // append definitions 
        $('#definitions a#' + letter + ' + ul').append('<li><a href="#">' + $(v).attr('name') + '</a><span> - ' + $(v).attr('definition') + '</span></li>'); 
       }); 

       // bind click events on the letters to show/hide the words 
       $('#definitions li > a').click(function() { 
        $(this).next('ul').toggle(); 
        return false; 
       }); 

       // bind click events on the words to show/hide the definitions 
       $('#definitions ul li a').click(function() { 
        $(this).next('span').toggle(); 
        return false; 
       }); 
      } 
     }); 
    } 
});

것은 이것이 아닐 수 있음을주의하세요 큰 XML 파일로 최상의 솔루션; 브라우저는 페이지를 렌더링하기 전에 먼저 전체 파일을 전송해야합니다. 따라서 페이지에 a-z 목록을 만든 다음 사용자가 편지를 클릭 할 때 단어를 동적으로로드하는 대체 솔루션을 조사해야 할 수 있습니다. 따라서 관련성이 높고 필요한 단어 인 & 정의 만 필요에 따라 전송됩니다. 동일한 정의에 대한 중복 요청을 피하기 위해이를 캐시 할 수도 있습니다.

출처

2011-08-05 13:03:56 andyb

jQuery를 사용하여 XML 파일에서 데이터 표시

답변

관련 문제