Как можно обернуть последовательные элементы списка с одинаковыми текстовыми значениями в новый элемент?

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>

Так что, если содержимое DIV с групповой тикетой класса <li> одинаково, я хочу, чтобы это <li> элементов соответствовало wrapAll() DIV, называемому <new>.Это вывело бы это как:

<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

Вы всегда можете попытаться сделать это таким образом, не самый хороший код, но он работает. Пожалуйста, смотрите скрипка или код, указанный ниже

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>

Answer 2

Чтобы ответить на ваш существенный вопрос, вам нужно сравнить значения 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');
    } 
});

Затем вы можете по-разному оформить эти элементы списка.