Wie navigiere ich durch XML-Knoten in jQuery?

Question

Wie kann ich xml-Knoten mit jQuery navigieren, ohne hide() and show() Methoden zu verwenden. Nur die Knoten mit dem nächsten und vorherigen sibilings ersetzt mit nächsten, vorherigen Tasten wie THIS

Ich habe hier meine Demo erstellt in PLUNKER DEMO

I hide() and show() verwendet. Ich kann im Debugger sehen, dass es keine Anzeige anzeigt und blockiert, was ich nicht gerne verwende. Ich möchte Navigation wie w3schools DEMO verwenden. Jede Hilfe wäre großartig!

Answer 1

Sehen Sie sich diese 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); 
      } 

    } 
    }); 

});