упорядочение jquery и групповые элементы li - PullRequest
Новая
       7

упорядочение jquery и групповые элементы li

2 голосов
/ 23 февраля 2012

Допустим, у меня есть список элементов под div или UL. Я хочу взять все элементы списка с одинаковым атрибутом заголовка и обернуть его UL. Следующая часть, однако, состоит в том, что я хочу, чтобы UL находился под LI с тем же атрибутом. Итак, я пытаюсь группировать в основном.

Итак .... я начинаю с ..... 

<li>Insurance</li>
<li>Education</li>
<li>Sports</li>
<li>Construction</li>
<li title ="Insurance">Malpractice</li>
<li title ="Construction">Carpentry</li>
<li title ="Education">College</li>
<li title ="Insurance">Automobile</li>
<li title ="Education">High School</li>
<li title ="Construction">Iron Worker</li>

и я хочу добраться до ...... 

<li>Insurance
    <ul>
         <li title ="Insurance">Malpractice</li>
         <li title ="Insurance">Automobile</li>
   </ul>
</li>
<li>Education
    <ul>
         <li title ="Education">College</li>
         <li title ="Education">High School</li>
   </ul>
</li>
<li>Sports</li>
<li>Construction
    <ul>
         <li title ="Construction">Carpentry</li>
         <li title ="Construction">Iron Worker</li>
   </ul>
</li>

Любая помощь будет оценена. Очевидно, новичок в мире jquery и javascript, поэтому я пытаюсь обдумать это.

Ответы [ 3 ]

4 голосов
/ 23 февраля 2012

Ввод: 

<div id="stuffs">
    <li>Insurance</li>
    <li>Education</li>
    <li>Sports</li>
    <li>Construction</li>
    <li title ="Insurance">Malpractice</li>
    <li title ="Construction">Carpentry</li>
    <li title ="Education">College</li>
    <li title ="Insurance">Automobile</li>
    <li title ="Education">High School</li>
    <li title ="Construction">Iron Worker</li>
</div>

jQuery: 

​$("#stuffs li").each(function(){
    $("#stuffs li[title='"+$(this).text()+"']").appendTo($(this)).wrapAll("<ul />");
});​​​​​​​​​​

Выход: 

<div id="stuffs">
  <ul>
    <li>Insurance
        <ul>
            <li title="Insurance">Malpractice</li>
            <li title="Insurance">Automobile</li>
        </ul>
    </li>
    <li>Education
        <ul>
            <li title="Education">College</li>
            <li title="Education">High School</li>
        </ul>
    </li>
    <li>Sports</li>
    <li>Construction
        <ul>
            <li title="Construction">Carpentry</li>
            <li title="Construction">Iron Worker</li>
        </ul>
    </li>
  </ul>
</div>

Smile : -)

Демо здесь

1 голос
/ 23 февраля 2012

Это должно работать 

$('#id li:not([title])').append('<ul />');

$('#id li[title]').each(function() {
    $(this).appendTo('#id li:contains(' + $(this).attr('title') + ') ul');
})

Демо

1 голос
/ 23 февраля 2012 
// first we fetch all items without title attribute
var topLevel = $('li:not([title])');

// for each of those...
topLevel.each(function() {
  var li = $(this),
      // ... we get its text ...
      title = li.text(),
      // ... and other li elements with the corresponding title
      children = $('li[title="' + title + '"]');

  // if there are any...
  if (children.length > 0) {
    // ... create an empty list ...
    var ul = $('<ul></ul>');
    // ... fill it and ...
    children.appendTo(ul);
    // ... append it to the original li element
    ul.appendTo(li);
  }
});

jQuery документация: :not(), [title], each(), appendTo()

...