JQuery jeder Funktionsindex

Question

Hallo Leute brauchen Hilfe beim Anpassen einiger JQ. Das alles funktioniert (vielleicht nicht perfekt für Puristen), aber zumindest funktioniert es so, wie es sollte. Allerdings möchte ich einige "zusätzliche Funktionalität" hinzufügen, die ich brauche, um die einzelnen Index-Funktion zu verwenden, aber ich habe keine Ahnung wie/was/warum/wo ....

Der Code dynamisch fügt <div> 's hinzu und verbirgt das vorherige, um einfache "Seiten" zu erstellen (wenn Sie sie so nennen wollen) und eine einfache Paginierung für die erzeugten <div>' s. Die zusätzliche Funktionalität, die ich hinzufügen möchte, ist ein div löschen - OK löschen ist NP nur "remove()" die entsprechende <div>, aber kann ich dynamisch "neu" mit "jeder"?

z.B. wenn ich 4 "Seiten" habe, würde ich (im Code unten) 8 divs haben - pageno ist die Variable, die verwendet wird, um die Länge/Anzahl der Seiten zu erhalten (wieder Code unten).

<div class="pagedisplay" id="rhcol0">text</div> 
<div class="pagedisplay" id="lhcol0">text</div> 
<div class="pagedisplay" id="rhcol1">text</div> 
<div class="pagedisplay" id="lhcol1">text</div> 
<div class="pagedisplay" id="rhcol2">text</div> 
<div class="pagedisplay" id="lhcol2">text</div> 
<div class="pagedisplay" id="rhcol3">text</div> 
<div class="pagedisplay" id="lhcol3">text</div> 

Wenn ich dann pageno==2 dh

<div class="pagedisplay" id="rhcol2">text</div> 
<div class="pagedisplay" id="lhcol2">text</div> 

entfernen, ist es möglich, die verbleibenden divs dynamisch "indizieren" so würde ich dann:

<div class="pagedisplay" id="rhcol0">text</div> 
<div class="pagedisplay" id="lhcol0">text</div> 
<div class="pagedisplay" id="rhcol1">text</div> 
<div class="pagedisplay" id="lhcol1">text</div> 
<div class="pagedisplay" id="rhcol2">text</div> 
<div class="pagedisplay" id="lhcol2">text</div> 

Mit anderen Worten: die pageno noch bleibt in der Reihenfolge ohne "Lücken" wie oben NICHT

<div class="pagedisplay" id="rhcol0">text</div> 
<div class="pagedisplay" id="lhcol0">text</div> 
<div class="pagedisplay" id="rhcol1">text</div> 
<div class="pagedisplay" id="lhcol1">text</div> 
<div class="pagedisplay" id="rhcol3">text</div> 
<div class="pagedisplay" id="lhcol3">text</div> 

Wo pageno==2 wurde entfernt?

Hier ist mein aktueller Code:

$(document).ready(function() { 
$('#addpage').click(function(){ 
var pageno = $('.pagebut').length; 
$('.pagedisplay:visible').hide(); 
$('#lhcol').append('<div class="pagedisplay" id="lhcol'+pageno+'">'+pageno+'</div>'); 
$('#rhcol #slider_holder').before('<div class="pagedisplay" id="rhcol'+pageno+'">'+pageno+'</div>'); 
$('#rhcol #slider_holder').show(); 
$('#rhcol #slider_holder').append(' <a href="#" class="pagebut">'+pageno+'</a> '); 
return false; 
}); 
$('.pagebut').live('click',function(){ 
var pageno = $(this).html(); 
$('.pagedisplay').hide(); 
$('#lhtest'+pageno).show(); 
$('#rhtest'+pageno).show(); 
return false; 
}); 
}); 

Answer 1

ich jede der Funktionen verändern ein wenig. Etwas • wie • das sollte funktionieren. Ich weiß nicht, ob das genau funktioniert. Ich benutze nextAll von jQuery, um Geschwister zu bekommen, die einem gegebenen Element folgen, und dann each, um durch sie zu iterieren und 1 von der Seitenzahl zu subtrahieren. Sinn ergeben?

Ich habe auch etwas geändert, um die Anzahl der Elemente zu reduzieren, die geändert werden müssen. Die Paging-/Entfernen-Schaltflächen haben eine direkte Nummer, die für ihre Arbeit verwendet werden kann, anstatt jedes Element auf der Seite durcharbeiten und die Anzahl ändern zu müssen.

$(document).ready(function() { 
    $('#addpage').click(function(){ 
    var pageno = parseInt($('.pagebut').last().html()) + 1; 
    $('.pagedisplay:visible').hide(); 
    $('#lhcol').append('<div class="pagedisplay" id="lhcol'+pageno+'">'+pageno+'</div>'); 
    $('#rhcol #slider_holder').before('<div class="pagedisplay" id="rhcol'+pageno+'">'+pageno+'</div>'); 
    $('#rhcol #slider_holder').show(); 
    $('#rhcol #slider_holder').append(' <a href="#" class="pagebut" id="pagebut'+pageno+'" data-page_number="'+pageno'">'+pageno+'</a> '); 
    $('#rhcol #slider_holder').append(' <a href="#" class="remove" id="remove'+pageno'" data-page_number="'+pageno'">Remove '+pageno+'</a> '); 
    return false; 
    }); 
    $('.pagebut').live('click',function(){ 
    var pageno = $(this).data('page_number'); 
    $('.pagedisplay').hide(); 
    $('#lhtest'+pageno).show(); 
    $('#rhtest'+pageno).show(); 
    return false; 
    }); 
    $('.remove').live('click', function() { 
    var page_number_to_remove = parseInt($(this).data('page_number')); 
    var total_pages = $('.pagebut').length; 
    $(this).nextAll('.pagebut').each(function(index, elem) { var el = $(elem); el.html(parseInt(el.html()) - 1)}); 
    $(this).nextAll('.remove').each(function(index, elem) { var el = $(elem); el.html('Remove '+ parseInt(el.html().replace(/Remove /,'')) - 1)}); 
     $('remove'+page_number_to_remove, 'pagebut'+page_number_to_remove, 'rhcol'+page_number_to_remove, 'lhcol'+page_number_to_remove).remove(); 
    return false; 
    }); 
});