Вставьте <div>для каждых 5 элементов, используя Javascript - PullRequest
Новая
       4

Вставьте <div>для каждых 5 элементов, используя Javascript

8 голосов
/ 30 августа 2011

У меня есть простой список изображений, который управляется через CMS (ExpressionEngine). Как это: 

<div class="wrapper">
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
</div>

То, что я хочу сделать, - это для каждых 5 изображений обернуть их в блок с классом «слайд». Чтобы выглядеть так: 

<div class="wrapper">
    <div class="slide">
      <a href="#"><img src="#" /></a>
      <a href="#"><img src="#" /></a>
      <a href="#"><img src="#" /></a>
      <a href="#"><img src="#" /></a>
      <a href="#"><img src="#" /></a>
    </div>
    <div class="slide">
      <a href="#"><img src="#" /></a>
      <a href="#"><img src="#" /></a>
      <a href="#"><img src="#" /></a>
    </div>
</div>

Причина, по которой я не кодирую вручную "", заключается в том, что я использую ползунок содержимого jQuery, который требует, чтобы каждые 5 изображений были помещены в слайд div.

Я не уверен, каким будет код в ExpressionEngine, чтобы сделать это, но я полагаю, что может быть проще использовать Javascript, чтобы обернуть каждые 5 изображений с помощью div. И просто чтобы ExpressionEngine выводил разные изображения одновременно.

Любая помощь?

Ответы [ 6 ]

24 голосов
/ 30 августа 2011

Вот один из способов:

Пример: http://jsfiddle.net/T6tu4/

$('div.wrapper > a').each(function(i) {
    if( i % 5 == 0 ) {
        $(this).nextAll().andSelf().slice(0,5).wrapAll('<div class="slide"></div>');
    }
});

Вот другой способ:

Пример: http://jsfiddle.net/T6tu4/1/

var a = $('div.wrapper > a');

for( var i = 0; i < a.length; i+=5 ) {
    a.slice(i, i+5).wrapAll('<div class="slide"></div>');
}
4 голосов
/ 30 августа 2011

Вы можете просто создать div для каждого элемента fith и переместить ссылки на них, используя метод append: 

var wrapper = $('.wrapper');
var div;
$('a', wrapper).each(function(i,e){
    if (i % 5 == 0) div = $('<div/>').addClass('slide').appendTo(wrapper);
    div.append(e);
});

Демо: http://jsfiddle.net/Guffa/ybrxu/

1 голос
/ 30 августа 2011

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

$(function(){
    var curDiv = null;
    var mainDiv = $("div.wrapper");
    $("span", mainDiv).each(function(i, b){
        if(i%5 == 0) {
            curDiv = $("<div class='slide'/>").appendTo(mainDiv);
        }
        curDiv.append(b);
    });
});
1 голос
/ 30 августа 2011

Я думаю, что это сделало бы это: 

var links = $('.wrapper').children();
for (var i = 0, len = links.length; i < len; i += 5) {
    links.slice(i, i + 5).wrapAll('<div class="slide"/>');
}
0 голосов
/ 30 августа 2011

Используйте slice (), чтобы выбрать подмножество элементов, затем wrapAll (), чтобы обернуть div вокруг них.Вот функция, которая делает это. 

var wrapEveryN = function(n, elements, wrapper) {
   for (var i=0; i< elements.length; i+=n) {
       elements.slice(i,i+n).wrapAll(wrapper);
   }
}

wrapEveryN( 5, $(".wrapper a"), '<div class="slide"></div>' );

Демонстрация: http://jsfiddle.net/C5cHC/

Обратите внимание, что второй параметр слайса может выходить за пределы, но jQuery, кажется, обрабатывает это автоматически.

0 голосов
/ 30 августа 2011

Вам нужно использовать jQuery ломтик с упаковкой

Проверьте этот вопрос

...