Question 35777 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How can I sort elements alphabetically by text content and bring next div if existing? – Jquery

I have a menu I want to sort alphabetically. I found this:
Sort DIVs alphabetically without destroying and recreating them?

I applied the jQuery script to "sort". Works great. The only logical problem is that the hidden divs (class: hidden) don’t follow, they show/hides by click on "btn_expand" and toggle next div.

I have tried some different ways to develop the script but I don’t find any good solution to it. Ends up with a bunch of code and messy results. It should be solved as if next div hasClass "hidden" then "bring it with" and append after the "btn_expand" but I fail with that. Can somebody with more skills maybe help out, it would make my day. 🙂

Thanks!

$('.sort').sort(function(a, b) {
  if (a.textContent < b.textContent) {
    return -1;
  } else {
    return 1;
  }
}).appendTo('body');

$(".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/3.3.1/jquery.min.js"></script>

<p>Without sorting</p>

<div class="btn_expand">CCC</div>
<div class="hidden">Hidden content shown by press CCC</div>
<div class="btn_no_expand">EEE</div>
<div class="btn_no_expand">AAA</div>
<div class="btn_no_expand">DDD</div>
<div class="btn_expand">BBB</div>
<div class="hidden">Hidden content shown by press BBB</div>


<br><br>
<p>With sorting</p>

<div class="btn_expand sort">CCC</div>
<div class="hidden">Hidden content shown by press CCC</div>
<div class="btn_no_expand sort">EEE</div>
<div class="btn_no_expand sort">AAA</div>
<div class="btn_no_expand sort">DDD</div>
<div class="btn_expand sort">BBB</div>
<div class="hidden">Hidden content shown by press BBB</div>
Tags:

2

Answers


  1. 0

    You could sort, then for each matched element, check if next sibling has class .hidden, if so, add it to the selector, and then append to body:

    $('.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('body');
    } else {
        $(el).appendTo('body');
    }

});

$(".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/3.3.1/jquery.min.js"></script>
<div class="btn_expand sort">CCC</div>
<div class="hidden">Hidden content shown by press CCC</div>
<div class="btn_no_expand sort">EEE</div>
<div class="btn_no_expand sort">AAA</div>
<div class="btn_no_expand sort">DDD</div>
<div class="btn_expand sort">BBB</div>
<div class="hidden">Hidden content shown by press BBB</div>
    Login or Signup to reply.
  2. 0

    Or, in an even shorter form, you can do this:

    function sortBlock(sel){
 const block=$(sel);
 $('.sort', block)
  .sort((a, b)=>a.textContent.localeCompare(b.textContent))
  .each((i,el)=>$(el).add($(el).next(".hidden")).appendTo(block));
}
sortBlock("#two");

$(".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/3.3.1/jquery.min.js"></script>
<h2>block 1</h2>
<div id="one">
  <div class="btn_expand sort">CCC</div>
  <div class="hidden">Hidden content shown by press CCC</div>
  <div class="btn_no_expand sort">EEE</div>
  <div class="btn_no_expand sort">AAA</div>
  <div class="btn_no_expand sort">DDD</div>
  <div class="btn_expand sort">BBB</div>
  <div class="hidden">Hidden content shown by press BBB</div>
</div>
<h2>block 2</h2>
<div id="two">
  <div class="btn_expand sort">CCC</div>
  <div class="hidden">Hidden content shown by press CCC</div>
  <div class="btn_no_expand sort">EEE</div>
  <div class="btn_no_expand sort">AAA</div>
  <div class="btn_no_expand sort">DDD</div>
  <div class="btn_expand sort">BBB</div>
  <div class="hidden">Hidden content shown by press BBB</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search