Sorting divs alphabetically in its own parent (due to many lists)-CodePudding

This is a follow up to this question: How can I sort elements alphabetically by text content and bring next div if existing?

The problem I ran into is that there is multiple lists and when apply the correct answer in the previous question all the sorted divs get appended to all parent divs (so they get multiple apended divs). Tried to solve this by make it append to its parent but couldent make it work. If somebody wants to help I would appreciate it.

Problem: All parent divs get all appended divs.

$('.sort').sort(function(a, b) {
  if (a.textContent < b.textContent) {
    return -1;
  } else {
    return 1;
  }
}).each((index, el) => {
    const hidden = $(el).next();

    if (hidden.hasClass('hidden')) {
        $(el).add(hidden).appendTo('.parent');
    } else {
        $(el).appendTo('.parent');
    }

});

$(".btn_expand").on('click', function () {
  $(this).next("div").toggle();
});

.btn_expand{background:red;}  
.hidden{display: none;}
.parent{border: 1px solid blue; padding: 5px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div >
  <div >CCC</div>
  <div >Hidden content shown by press CCC</div>
  <div >EEE</div>
  <div >AAA</div>
  <div >DDD</div>
  <div >BBB</div>
  <div >Hidden content shown by press BBB</div>
</div>

<br><br>

<div >
  <div >CCC</div>
  <div >Hidden content shown by press CCC</div>
  <div >EEE</div>
  <div >AAA</div>
  <div >DDD</div>
  <div >BBB</div>
  <div >Hidden content shown by press BBB</div>
</div>

What an awesome code editor Stackoverflow has these days! Never seen it before.

Thanks for answers. Sorry for bad engelsh.

CodePudding user response：

Essentially, you have to iterate the .parent elements, and then select the .sort elements below the currently iterated parent. For that you can use the second argument of the $ function.

You should also call appendTo with that parent as argument.

I made some other, less essential changes:

$('.parent').each(function(_, parent) {
  $('.sort', parent).sort(function(a, b) {
    return a.textContent.localeCompare(b.textContent);
  }).each((index, el) => {
      const hidden = $(el).next();
      $(el).appendTo(parent);
      if (hidden.hasClass('hidden')) {
          hidden.appendTo(parent);
      }
  });
});

$(".btn_expand").on('click', function () {
  $(this).next("div").toggle();
});

.btn_expand{background:red;}  
.hidden{display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div >
  <div >CCC</div>
  <div >Hidden content shown by press CCC</div>
  <div >EEE</div>
  <div >AAA</div>
  <div >DDD</div>
  <div >BBB</div>
  <div >Hidden content shown by press BBB</div>
</div>

<br><br>

<div >
  <div >CCC</div>
  <div >Hidden content shown by press CCC</div>
  <div >EEE</div>
  <div >AAA</div>
  <div >DDD</div>
  <div >BBB</div>
  <div >Hidden content shown by press BBB</div>
</div>