Regrouping element with jquery

Question

I have several posts on my page:

<div class="messages">A</div>
<div class="messages">B</div>
<div class="messages">A</div>
<div class="messages">C</div>

Is there any way with jQuery (without PHP) to count and rearrange 2 div A, like this:

<div class="messages">A</div><span>2</span>
<div class="messages">B</div>
<div class="messages">C</div>

Thank.

Answer 1

You can start with something like this:

$('div.messages:contains(A)');

How you build this into your other code will depend on what you know in advance.

If you don't know what the possible values ​​are, you are likely to end up with something like this:

var $messages = $('div.messages');
var counts = {};
$messages.each(function (i, div) {
  var $div = $(div);
  if (counts[$div.text()] == undefined) { counts[$div.text()] = 0; }
  ++counts[$div.text()];
});

This will count divs based on their contents. Then you add something that crosses the counts.

Answer 2

This should help you :)

"use strict";
/*global $*/
$(function () {
  var selector = '.messages'; 
  $(selector).each(function (i, div) {
    var similar = $(selector + ':gt(' + i + ')').filter(function (index) {
      return $(this).text() === $(div).text();
    });

    if (similar.length) {
      var count = similar.remove().length + 1;

      $(this).after(count);
    }
  });
});

wbr, roman