查找重复的LI类名称，并使用jQuery

Question

我有一个项目列表，

<ul class="testList">
  <li class="a">Should be grouped in a UL with id name = a</li>
  <li class="b">2</li>
  <li class="c">Should be grouped in a UL with id name = c</li>
  <li class="c">Should be grouped in a UL with id name = c</li>
  <li class="d">2</li>
  <li class="e">3</li>
  <li class="a">Should be grouped in a UL with id name = a</li>
</ul>

我正在尝试找到重复的LI类，然后将它们分组到UL中。

这是我的jQuery代码

$('ul.testList li').each(function(index, el) {
    var li = $(this);
    var cls = li.attr('class');
    var match = $('li[class="' + cls + '"]');

    if (match.length > 0) {
        var ul = $('<ul id="'+ cls +'"></ul>');
        match.appendTo(ul);

        $(this).add(match).addClass('matched');
    }
});

请参阅jsFiddle：https://jsfiddle.net/b4vFn/41/

Answer 1

尝试使用df = df[df.EPS <= 0] ，.appendTo()，.append()。请注意，如果.is() li未在className内重复，.testList未被li matched，则不会附加到新class元素

ul

$("ul.testList li").each(function(i, el) {
  if (!$(el).parent().find("#" + this.className).is("*") 
      // if `.testList` has another `li` element having `this.className` 
      && $(el).parent().find("." + this.className).not(this).is("*")) {
    $(el).parent()
    .append(
      $("<li />", {
        html: $("<ul />", {
                id: el.className
              }).append($(el).addClass("matched"))[0].outerHTML
      })
    );
  } else {
    $(el).appendTo("#" + this.className).addClass("matched")
  }
})

.matched {
  color: red;
}

Answer 2

乍一看，我建议：

// finding all direct children of the <ul> with the class 'testList'
// which are both <li> elements and have a 'class' attribute,
// iterating over them using the each() method:
$('ul.testList > li[class]').each(function () {

    // if a <ul> already exists with the class-name of the
    // current <li> element over which we're iterating
    // (which would lead to a truthy non-zero length):
    if ($('ul.' + this.className).length) {

        // we append this <li> element to the found <ul>:
        $(this).appendTo($('ul.' + this.className));
    } else {

        // otherwise we create a <ul> element:
        $('<ul>', {
            // give it the class-name of the current <li> element:
            'class': this.className
        // wrap it (the created <ul>) with an <li> element:
        }).wrap('<li></li>')
        // append the <ul> (wrap returns the original node) to
        // the current parent-node of the <li>:
        .appendTo(this.parentNode)
        // and append the original <li> node (appendTo also returns
        // the original node) to the <ul>:
        .append(this);
    }

    // adding the 'matched' class-name to the current <li>
    // element:
    this.classList.add('matched');
});

$('ul.testList > li[class]').each(function() {
  if ($('ul.' + this.className).length) {
    $(this).appendTo($('ul.' + this.className));
  } else {
    $('<ul>', {
      'class': this.className
    }).wrap('<li></li>').appendTo(this.parentNode).append(this);
  }
  this.classList.add('matched');
});

.matched {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="testList">
  <li class="a">should be red and grouped in a UL with id name = a</li>
  <li class="b">2</li>
  <li class="c">should be red and grouped in a UL with id name = c</li>
  <li class="c">should be red and grouped in a UL with id name = c</li>
  <li class="d">2</li>
  <li class="a">should be red and grouped in a UL with id name = a</li>
</ul>

JS Fiddle demo

参考文献：

• append()。
• appendTo()。
• each()。

Answer 3

你可以这样做

＆＃13;

＆＃13;

var cls = [];
// getting unique class names
$('.testList li').attr('class', function(i, v) {
  if (cls.indexOf(v) == -1) cls.push(v);
});

// iterating over class name and creating ul and appending
for (var i = 0; i < cls.length; i++) {
  // creating ul with id as class name
  var ul = $('<ul/>', {
    id: cls[i]
  });
  // selecting all elements with classname and appending it to ul 
  $('.' + cls[i]).appendTo(ul);
  // creating new li to add to main ul, setting html as created ul.
  $('<li/>', {
    html: ul
  }).appendTo('.testList');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="testList">
  <li class="a">should be red and grouped in a UL with id name = a</li>
  <li class="b">2</li>
  <li class="c">should be red and grouped in a UL with id name = c</li>
  <li class="c">should be red and grouped in a UL with id name = c</li>
  <li class="d">2</li>
  <li class="a">should be red and grouped in a UL with id name = a</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

或合并版

＆＃13;

＆＃13;

var cls = [];
$('.testList li').attr('class', function(i, v) {
  if (cls.indexOf(v) == -1) cls.push(v);
});

for (var i = 0; i < cls.length; i++) {
  $('<li/>', { // mail ul list item
    html: $('<ul/>', { // it's content as new ul
      id: cls[i], // setting ul id as class name
      html: $('.' + cls[i]) // appending parent ul to new ul
    })
  }).appendTo('.testList'); // appending li to parent ul
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="testList">
  <li class="a">should be red and grouped in a UL with id name = a</li>
  <li class="b">2</li>
  <li class="c">should be red and grouped in a UL with id name = c</li>
  <li class="c">should be red and grouped in a UL with id name = c</li>
  <li class="d">2</li>
  <li class="a">should be red and grouped in a UL with id name = a</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 4

这将对匹配的元素进行分组并将它们附加到新的div：

＆＃13;

＆＃13;

$('ul.testList li').each(function(index, el) {
  var li = $(this);
  var cls = li.attr('class');
  var match = $('li[class="' + cls + '"]');

  if (match.length > 0) {
    var ul = $('<ul></ul>').attr('id', cls);
    match.appendTo(ul);
    ul.appendTo('#output')

    $(this).add(match).addClass('matched');
  }
});

＆＃13;

.matched {
  color: red
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="testList">
  <li class="a">Should be red and grouped in a UL with id name = a</li>
  <li class="b">This is B</li>
  <li class="c">Should be red and grouped in a UL with id name = c</li>
  <li class="c">Should be red and grouped in a UL with id name = c</li>
  <li class="d">This is d</li>
  <li class="a">Should be red and grouped in a UL with id name = a</li>
</ul>

<div id='output'></div>

＆＃13;

＆＃13;

＆＃13;