Оберните первый уровень тегов "li" в один div, используя Jquery - PullRequest
Новая
       16

Оберните первый уровень тегов "li" в один div, используя Jquery

1 голос
/ 10 июля 2010

Предположим, у нас есть многоуровневый список HTML, который выглядит следующим образом: 

<ul class="catalog">
  <li>
    <ul>
      <li>
        <ul>
          <li>subcat subcat 1</li>
          <li>subcat subcat 2</li>
          <li>subcat subcat 3</li>
        </ul>
      </li>
      <li>subcat 2</li>
      <li>subcat 3</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>subcat 4</li>
      <li>subcat 5</li>
      <li>subcat 6</li>
    </ul>
  </li>

</ul>

Мне нужно только обернуть в один тег <li> теги (с заголовком "header 1", "header 2" ... и все его дочерние элементы), которые принадлежат первому уровню списка.

Результат должен быть: 

<ul class="catalog">
  <div class="myWrapper">
    <!-- Added by JQuery -->
    <li>
      <ul>
        <li>
          <ul>
            <li>subcat subcat 1</li>
            <li>subcat subcat 2</li>
            <li>subcat subcat 3</li>
          </ul>
        </li>
        <li>subcat 2</li>
        <li>subcat 3</li>
      </ul>
    </li>
    <li>
      <ul>
        <li>subcat 4</li>
        <li>subcat 5</li>
        <li>subcat 6</li>
      </ul>
    </li>

  </div>
  <!-- Added by JQuery -->

</ul>

Я попробовал wrap() функцию, но она не сработала, как ожидалось

Есть идеи, как сделать эту работу?

Ответы [ 2 ]

3 голосов
/ 10 июля 2010

$('.catalog > li').wrapAll('<div class="wrapper"></div>');

Но вы начинаете и заканчиваете серьезно недействительным HTML, поэтому вам, вероятно, следует это исправить, а затем задать этот вопрос еще раз.

0 голосов
/ 11 июля 2010

Во-первых, давайте начнем с правильного HTML, например: 

<ul class="catalog">
   <li>header 1
      <ul>
        <li>subcat 1
            <ul>
               <li>subcat subcat 1</li>
               <li>subcat subcat 2</li>
               <li>subcat subcat 3</li>
            </ul>
        </li>
        <li>subcat 2</li>
        <li>subcat 3</li>
      </ul>
   </li>
   <li>header 2
      <ul>
        <li>subcat 4</li>
        <li>subcat 5</li>
        <li>subcat 6</li>
      </ul>
    </li>
</ul>​

Затем вы закручиваете их, используя .wrapAll(), например: 

$(".catalog > li").wrapAll("<li><div class='something'><ul></ul></div></li>");​

В результате получается правильный HTML, например: 

<ul class="catalog">
  <li>
    <div class="something">
      <ul>
        <li>header 1
          <ul>
            <li>subcat 1
                <ul>
                   <li>subcat subcat 1</li>
                   <li>subcat subcat 2</li>
                   <li>subcat subcat 3</li>
                </ul>
            </li>
            <li>subcat 2</li>
            <li>subcat 3</li>
          </ul>
        </li><li>header 2
          <ul>
            <li>subcat 4</li>
            <li>subcat 5</li>
            <li>subcat 6</li>
          </ul>
        </li>
      </ul>
    </div>
  </li>  
</ul>

Вы можете проверить это здесь , хотя, возможно, вы можете получить эффект , который вы хотите, используя стилизацию для оригинального <ul>, display: block, например.

...