Jquery wrapAll ul li после параграфов - PullRequest
Новая
       44

Jquery wrapAll ul li после параграфов

1 голос
/ 17 ноября 2011

Мне нужно преобразовать это: 

<div id="truc">
   <p>First</p>
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three</li>

  <p>Second</p>
    <li>Item four</li>
    <li>Item five</li>
    <li>Item six</li>
</div>

в это: 

<div id="truc">
   <p>First</p>
    <ul id="list1">
       <li>Item one</li>
       <li>Item two</li>
       <li>Item three</li>
    </ul>

   <p>Second</p>
    <ul id="list2">
       <li>Item four</li>
       <li>Item five</li>
       <li>Item six</li>
    </ul>
</div>

Я пытался использовать wrapAll с jquery, что-то вроде этого: 

$('#truc p~li').each(function() {
   $(this).wrapAll('<ul>');
});

Любые предложения будут очень признательны :) Большое спасибо!

1 Ответ

2 голосов
/ 17 ноября 2011

Для этой определенной структуры вы можете использовать следующее: 

$('p', '#truc').each(function() {
    $(this).nextUntil('p').wrapAll('<ul>');
});

Вывод ( демо ): 

<div id="truc">
   <p>First</p>
   <ul>
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three</li>
   </ul>
   <p>Second</p>
   <ul>
      <li>Item four</li>
      <li>Item five</li>
      <li>Item six</li>
   </ul>
</div>

Что касается идентификаторов, вы можете ( demo ): 

$('p', '#truc').each(function(i) {
    $(this).nextUntil('p').wrapAll($('<ul>', {id: 'list' + (1 + i)}));
});

Проблема с вашим оригинальным подходом: 

$('#truc p~li').each(function() {
   $(this).wrapAll('<ul>');
});

заключается в том, что селектор #truc p~li mathces все <li> элементов (не группировка для каждого <p> элемента) и, таким образом, каждый элемент в совпадении (<li>) элемент) с элементом <ul>.

...