Question

如果子元素的内容与另一个子元素的内容相同，我想将元素包装到新的DIV中。例如：

<ul>
  <li class="product_item">
    <h2>Product 1</h2>
    <div class="ticketgroup">Dayticket weekend</div>
  </li>
  <li class="product_item">
    <h2>Product 2</h2>
    <div class="ticketgroup">Dayticket weekdays</div>
  </li>
  <li class="product_item">
    <h2>Product 3</h2>
    <div class="ticketgroup">Dayticket weekdays</div>
  </li>
  <li class="product_item">
    <h2>Product 4</h2>
    <div class="ticketgroup">Dayticket weekend</div>
  </li>
  <li class="product_item">
    <h2>Product 5</h2>
    <div class="ticketgroup">Dayticket weekdays</div>
  </li>
</ul>

因此，如果具有<li>类票证组的DIV的内容是相同的，我希望将此<li>项放入wrapAll()到名为<new>的DIV中。它将输出为：

<ul>
  <div class="new">
    <li class="product_item">
      <h2>Product 1</h2>
      <div class="ticketgroup">Dayticket weekend</div>
    </li>
    <li class="product_item">
      <h2>Product 4</h2>
      <div class="ticketgroup">Dayticket weekend</div>
    </li>
  </div>
  <div class="new">
    <li class="product_item">
      <h2>Product 2</h2>
      <div class="ticketgroup">Dayticket weekdays</div>
    </li>
    <li class="product_item">
      <h2>Product 3</h2>
      <div class="ticketgroup">Dayticket weekdays</div>
    </li>
    <li class="product_item">
      <h2>Product 5</h2>
      <div class="ticketgroup">Dayticket weekdays</div>
    </li>
  </div>
</ul>

Answer 1

要回答您的基本问题，您需要比较每个text()数组元素的$('.ticketgroup')值。将它们分组会有些曲折，因为您需要跟踪相邻值并存储子集。

这是一种方法的伪代码：

let matches = {
    // key (list item string): value (array of matching list item indexes)
};

$('li.product_item').each(function() {
    let myString = $(this).find('.ticketgroup').text();

    // check whether myString exists as a key in matches
        // if so, add its index to an array on that key
        // if not, add it as a new key with an empty array as its value
});

// now examine all the arrays and look for sequential indexes
// use those to break up the list or add styling classes

如您所见，这不是一件容易的事。如果要使匹配项在视觉上相似，而您知道通常需要什么字符串，只需进行一些样式设置即可：

$('.ticketgroup').each(function() {
    if ($(this).text() === 'Dayticket weekend') {
        $(this).closest('li').addClass('dayticket-weekend');
    } 
});

然后，您可以为这些列表项设置不同的样式。

Answer 2

您始终可以尝试以这种方式进行操作，虽然不是最好的代码，但是它可以工作。请参阅fiddle或下面的代码

var searchedNode = "";
var index = 1;


$(document).ready(function() {
  $(".ticketgroup").each(function() {
    var text = $(this).text();


    if (searchedNode === $(this).text()) {
      return false;
    }

    var ticketGroup = $(".ticketgroup").filter(function() {
      return $(this).text() === text;
    })


    if (ticketGroup.length > 1) {
      $(this).closest('.product_item').wrap("<div class='new'></div>")

      var group = $(".ticketgroup:contains(" + text + ")");

      for (var i = 1; i < ticketGroup.length; i++) {
        var productItem = $(ticketGroup[i]).closest('.product_item')
        productItem.appendTo($(".new:nth-of-type(" + index + ")"));
      }

      searchedNode = $(this).text();
      index++
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="product_item">
    <h2>Product 1</h2>
    <div class="ticketgroup">Dayticket weekend</div>
  </li>
  <li class="product_item">
    <h2>Product 2</h2>
    <div class="ticketgroup">Dayticket weekdays</div>
  </li>
  <li class="product_item">
    <h2>Product 3</h2>
    <div class="ticketgroup">Dayticket weekdays</div>
  </li>
  <li class="product_item">
    <h2>Product 4</h2>
    <div class="ticketgroup">Dayticket weekend</div>
  </li>
  <li class="product_item">
    <h2>Product 5</h2>
    <div class="ticketgroup">Dayticket weekdays</div>
  </li>
</ul>

如何在新元素中包装具有相同文本值的顺序列表项？

2 个答案: