добавить номер для каждого div - PullRequest
Новая
       6

добавить номер для каждого div

0 голосов
/ 08 января 2012

Привет, я хотел бы получить несколько советов о том, чего я пытаюсь достичь.

В настоящее время у меня есть это: 

<div class="thumbnail">
<img src="thumbnail_1.jpg" />
</div>

Для каждого .thumbnail я хотел бы добавить номер индекса с интервалом.Достижение этого: 

<div class="thumbnail">
<span class="index">001</span>
<img src="thumbnail_1.jpg" />
</div>

<div class="thumbnail">
<span class="index">002</span>
<img src="thumbnail_2.jpg" />
</div>

Спасибо, куча.

Ответы [ 4 ]

2 голосов
/ 08 января 2012 
$('div.thumbnail').each(function(i) {
    var num = zeroPad(i + 1, 3);
    $(this).prepend($('<span/>', {
        'class': 'index',
        'text': num
    }));
});

Метод .each() выполняет итерации по элементам, и обратный вызов получает нулевой индекс элемента - так что у вас есть счетчик.Сам элемент доступен как this (или как второй аргумент функции, но вам это не нужно)..prepend() вставляет переданный элемент / строку в начало элемента.

Для функции zeroPad просто найдите «pad номер javascript» в Google или здесь на SO ивы найдете довольно много функций. Вот один, например: 

function zeroPad(num, numZeros) {
    var n = Math.abs(num);
    var zeros = Math.max(0, numZeros - Math.floor(n).toString().length );
    var zeroString = Math.pow(10,zeros).toString().substr(1);
    if( num < 0 ) {
        zeroString = '-' + zeroString;
    }
    return zeroString + n;
}
1 голос
/ 08 января 2012

Наряду с другими решениями я предпочитаю следующее (личный вкус) 

$('div.thumbnail').prepend(function (index) {
    index = '000' + (index + 1);
    return '<span class=index>' + index.substr(index.length - 3) + '</span>';
});

Метод prepend принимает функцию, которая должна возвращать объект html / DOM, к которому необходимо добавить префикс. Подробнее смотрите в документах .

Редактировать : Как прокомментировал Майкл Даррант, возможно, вам нужны цифры в атрибуте img src, а не последовательные числа. Если дело обстоит именно так, вас должны покрыть следующие вопросы. 

$('div.thumbnail > img').before(function () {
    var index = this.src.match(/\d+/);
    if (index === null) return;
    index = '000' + index;
    return '<span class=index>' + index.substr(index.length - 3) + '</span>';
});

Здесь мы добавляем span before к элементам img. Подробнее см. before документацию .

1 голос
/ 08 января 2012

Вы можете выбрать все элементы с классом миниатюр, зациклить их и добавить интервал к каждому элементу, содержащему индекс. 

// Select all elements with class .thumbnail and loop over them
$(".thumbnail").each(function(i, elm) {
   // Prepend a index span to each element
   $(elm).prepend('<span class="index">' + i + '</span>");
});

В этом случае индекс будет числом будет основан на нуле,Если вы хотите, чтобы индекс начинался с 1, вы можете изменить среднюю строку следующим образом: $(elm).prepend('<span class="index">' + (i + 1) + '</span>");

1 голос
/ 08 января 2012

Попробуйте это: 

$('.thumbnail').each(function(index) {
    $('<span/>', {
         'class': 'index',
         text: "%03d".sprintf(index + 1)
    }).prependTo(this);
});

Обратите внимание, что он не будет добавлять начальные нули, как есть.

Мне нравится модуль JSXT String.js, который будетпозволяет писать "%03d".sprintf(index + 1)

Рабочая демонстрация на http://jsfiddle.net/SqQcs/1/

РЕДАКТИРОВАТЬ код изменился с первой попытки - забыл, что синтаксис $(<tag>, { ... }) работает только в jQueryконструктор, а не в случае обобщенного аргумента jQuery.

...