Использование Jquery для обтекания динамического содержимого тегами html - PullRequest
3 голосов
/ 14 июля 2009

У меня есть страница, которая возвращает динамический список элементов

<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>

Мне нужен способ вставлять теги вокруг каждой группы из 3 элементов списка. В основном преобразуйте код выше в этот

<ul>
 <div>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
 </div>
 <div> 
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
 </div>
</ul>

Я играл с Jquery Wrap (), WrapAll (), WrapInner () ... но пока безуспешно. Очень ценю любые решения или идеи на этот счет.

Ответы [ 4 ]

4 голосов
/ 15 июля 2009

Вот еще один метод, который генерирует HTML динамически и следует правильной семантике, позволяя только <li> элементам непосредственно внутри <ul> элементов:

$(function(){
    const GROUP_COUNT = 3;
    var liElements = $('ul > li');
    var count = liElements.length;
    var html = '';

    for (var i = 0; i < count; i += GROUP_COUNT) {
        html += '<li><ul>';
        liElements.slice(i, i + GROUP_COUNT).each(function(){
            html += '<li>' + $(this).html() + '</li>';
        });
        html += '</ul></li>';
    }

    $('ul').html(html);
});

Вы можете изменить GROUP_COUNT для группировки по разному количеству элементов.

Этот код преобразует:

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
</ul>

В:

<ul>
  <li>
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>item7</li>
    </ul>
  </li>
</ul>
1 голос
/ 14 июля 2009

Это решение для предложенного в комментариях вставить новый ul вместо div.

JQuery:

var numbGroups = ($('ul li').length - 3)/3;
for(var index = 0; index < numbGroups ; index++) {
$('#ul'+index).after("<ul id='ul"+(index+1)+"'></ul>");
$('#ul' + (index+1)).append($('ul#ul0 li:gt(2):lt(3)'));
}

Вставка идентификатора в ul

<ul id='ul0'>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>

РЕДАКТИРОВАТЬ: старое решение было неправильно для длинных списков. Исправил это.

0 голосов
/ 15 июля 2009

Я бы, как и предлагал ранее, посоветовал не включать некоторые элементы div в ul. Во всяком случае, вот мое предложение для этого:

for(var i = 2; i < $('ul li').length - 1; i += 3)
{    $('ul li').eq(i).after('</div><div>');    }
$('ul').wrapInner('<div></div>');
0 голосов
/ 15 июля 2009

Как насчет этого:

var originalList = $("ul");
var listsToAdd = originalList.children("li").length / 3 - 1;
for(var index = 0; index < listsToAdd; index++)
{
    originalList.before("<ul></ul>");
}
while (originalList.children("li").length > 3)
{
    originalList.children("li:lt(3)").appendTo("ul:empty:first");
}

Это работало в моих тестах с большими списками, и не нужно было добавлять id (при условии, что для начала есть только один список. В противном случае, просто установите originalList в список, который нужно разделить).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...