JQuery каждый индекс функции - PullRequest
Новая
       28

JQuery каждый индекс функции

0 голосов
/ 11 января 2011

Привет, ребята, нужна помощь в настройке JQ. Все это работает (может быть, не идеально для пуристов), но по крайней мере для меня это работает так, как должно. Тем не менее, я хотел бы добавить некоторую «дополнительную функциональность», которая, как мне кажется, требует от меня использования каждой индексной функции, но я понятия не имею, как / что / почему / где ....

Код динамически добавляет <div> и скрывает предыдущие, чтобы создать простые «страницы» (если вы хотите их так называть) и простую нумерацию страниц для созданных <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>

Другими словами, 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;
});
});

1 Ответ

1 голос
/ 11 января 2011

Я немного изменил каждую из функций.Что-то вроде этого должно работать.Я не знаю, будет ли это работать точно.Я использую jQuery nextAll , чтобы получить братьев и сестер, которые следуют за данным элементом, а затем каждый , чтобы перебрать их и вычесть 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;
  });
});
...