JQuery每個函數索引

Question

嗨夥計需要一些幫助調整一些JQ。這一切都有效（對於純粹主義者來說可能不是完美的），但至少對我而言，它應該是正常的。但是，我想添加一些我認爲需要我使用每個索引函數的「附加功能」，但我不知道如何/爲什麼/在哪裏......

該代碼動態添加了<div>，並隱藏了以前創建簡單的「頁面」（如果你想打電話給他們），並創建<div>的簡單分頁。我想添加的附加功能是刪除一個分區 - 確定刪除是NP只是「刪除（）」適當的<div>，但我可以動態地「重新編制」使用「每個」？

例如如果我有4個「頁」，我會（在下面的代碼中）8格 - pageno是用於獲取頁面長度/頁數的變量（下面的代碼）。

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

如果我再取出pageno==2即

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

是它可以動態地「重新索引」其餘的div，所以我會再有：

<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="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> 

其中pageno==2已被刪除？

這裏是我當前的代碼：

$(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

我每個功能改變了一下。像這樣的東西應該有效。我不知道這是否會發揮作用。我使用jQuery的nextAll來抓取跟隨給定元素的同胞，然後使用each遍歷它們，並從頁碼中減去1。合理？

我也改變了一些東西，以減少必須改變的元素數量。分頁/刪除按鈕有一個用於工作的直接號碼，而不必處理頁面中的每個元素並更改數字。

$(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; 
    }); 
});