如何瀏覽jQuery中的xml節點？

Question

如何在不使用hide() and show()方法的情況下使用jQuery導航xml節點。只有使用像THIS

下一個，上按鈕旁邊和以前sibilings更換節點我這裏有我的演示中PLUNKER DEMO

我用hide() and show()創建。我可以在調試器中看到它顯示爲無顯示，並阻止我不喜歡使用的塊。我想使用像w3schools DEMO的導航。任何幫助將是偉大的！

Answer 1

入住這Plunker

JS：

$(document).ready(function() { 

    var loadVar, numbOfElements=0, count, elementsPerPage = 5, 
    currentPage, numberOfPage; 

    $.ajax({ 
    type: "GET", 
    url: "data.xml", 
    dataType: "xml", 
    contentType:"text/xml", 
    async:false, 
    success: function(xml) { 
     loadVar = xml; 

     loadImages("ADOBE"); 
     showImages(); 
     disableEnableBtns(); 
    }, 

    error: function() { 
     alert("An error occurred while processing XML file."); 
    } 
    }); 

    $("#adobe").click(function() { 
    loadImages("ADOBE"); 
    showImages(); 
    disableEnableBtns(); 
    }); 

    $("#mac").click(function() { 
    loadImages("MAC"); 
    showImages(); 
    disableEnableBtns(); 
    }); 

    var sTitle, countEach; 

    function loadImages(loadNodeValues) { 
    $("#thumbnails").empty(); 
    numbOfElements=0 
    $(loadVar).find(loadNodeValues).each(function(i,item) { 
     var sTitle = "<section class='small count"+(i+1)+"'><h2>" + $(item).find("CAPTION").text() + "</h2><span>" +$(item).find("LINK").text() + "</span></section>"; 
     $("#thumbnails").html($("#thumbnails").html()+sTitle); 
     numbOfElements++; 
    }); 
    numberOfPage = numbOfElements/elementsPerPage; 

    } 

    function showImages() { 
    $('.small').hide(); 
    for (i = 1; i <= elementsPerPage; i++) { 
     $('.small').each(function() { 
     if ($(this).hasClass('count' + i)) { 
      $(this).show(); 
     } 
     }); 
    } 
    currentPage = 0; 
    } 

    function disableEnableBtns() { 

    if (thumbnails.children.length <= elementsPerPage) { 
     $("#rightBtn").prop("disabled", true); 
     $("#leftBtn").prop("disabled", true); 
    } else { 
     $("#rightBtn").prop("disabled", false); 
     $("#leftBtn").prop("disabled", false); 
    } 
    $("#leftBtn").prop("disabled", true); 
    } 

    $("#rightBtn").click(function() { 
    currentPage++; 
    $('.small').hide(); 
    var limit = elementsPerPage * (currentPage + 1) > numbOfElements ? numbOfElements : elementsPerPage * (currentPage + 1); 

    for (i = (currentPage * elementsPerPage) + 1; i <= limit ; i++) { 

     $('.small').each(function() { 
     if ($(this).hasClass('count' + i)) { 
      $(this).show(); 
     } 
     }); 

if(i == numbOfElements) 
      { 
      $("#rightBtn").prop("disabled", true); 
      $("#leftBtn").prop("disabled", false); 
      } 
      else 
      { 
     $("#rightBtn").prop("disabled", false); 
      $("#leftBtn").prop("disabled", false); 
      } 
    } 

    }); 

    $("#leftBtn").click(function() { 
    currentPage--; 
    $('.small').hide(); 
    for (i = (currentPage * elementsPerPage) + 1; i <= elementsPerPage * (currentPage + 1); i++) { 
     $('.small').each(function() { 
     if ($(this).hasClass('count' + i)) { 
      $(this).show(); 
     } 
     }); 

      if(i == 5) 
      { 
      $("#rightBtn").prop("disabled", false); 
      $("#leftBtn").prop("disabled", true); 
      } 
      else 
      { 
      $("#rightBtn").prop("disabled", false); 
      $("#leftBtn").prop("disabled", false); 
      } 

    } 
    }); 

});