Question

嗨，大家需要帮助调整一些JQ。这一切都有效（对纯粹主义者来说可能并不完美），但至少对我而言，它的工作原理应该如此。但是，我想添加一些“附加功能”，我认为需要我使用每个索引功能，但我不知道如何/ what / why / where ....

代码动态添加<div>并隐藏前一个以创建简单的“页面”（如果你想称之为），并为创建的<div>创建一个简单的分页。我想添加的附加功能是删除一个div - OK删除是NP只是“删除（）”相应的<div>，但是我可以使用“each”动态“重新索引”吗？

e.g。如果我有4个“页面”，我会（在下面的代码中）8个div - pageno是用来获取页面长度/数量的var（再次代码如下）。

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

换句话说，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="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;
  });
});

JQuery的每个函数索引

1 个答案: