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

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

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

这是一种方法的伪代码：

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

你总是可以尝试这样做，而不是最好的代码，但它的工作原理。 请参阅下面提到的小提琴或代码

 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>