Js sort 2 separate div blocks on the same page

JavaScript
1

Hello,

I have a feeling I am missing something super obvious, so if anyone can point me in the right direction I would gratefully appreciate it…along with a metaphorical dope slack!

I have two div blocks on a page (#div-1col and #div-col2), with each block consisting of multiple divs inside.

What I want to do is sort the divs inside both blocks alphabetical. However, the code below combines all. the divs into one div block.

I have tried renaming the function but have not succeeded yet. I’ll take any hints anyone wants to give. Thank you!


    <div id="div-1col"> 
        <div class="FSL_grid-container-1col employee1col" data-employee1col="fSalemer"> 
            <div>Zoe fSalemer 1col</div> 
        </div> 
        <div class="FSL_grid-container-1col employee1col" data-employee1col="xDoer"> 
          <div>John xDoer 1col</div> 
        </div> 
        <div class="FSL_grid-container-1col employee1col" data-employee1col="bSmither"> 
          <div>Ann bSmither 1col</div> 
        </div> 
        <div class="FSL_grid-container-1col employee1col" data-employee1col="uMaConnorer"> 
          <div>E. uMaConnorer 1col</div> 
        </div>
    </div>


    <script> 
        function comparator1col(a, b) { 
            if (a.dataset.employee1col < b.dataset.employee1col) 
                return -1; 
            if (a.dataset.employee1col > b.dataset.employee1col) 
                return 1; 
            return 0; 
        } 
    </script>




<div id="div-2col"> 
  <div class="FSL_grid-container-21col employee2col" data-employee1col="zzzfSalemer"> 
      <div>Zoe zzzzfSalemer</div> 
  </div> 
  <div class="FSL_grid-container-2col employee2col" data-employee1col="fffxDoer"> 
    <div>John fffxDoer 2col</div> 
  </div> 
  <div class="FSL_grid-container-2col employee2col" data-employee1col="wwwbSmither"> 
    <div>Ann wwwwbSmither 2col</div> 
  </div> 
  <div class="FSL_grid-container-2col employee2col" data-employee1col="mmmuMaConnorer"> 
    <div>E. mmmuMaConnorer 2col</div> 
  </div>
</div>


<script> 
    function comparator2col(a, b) { 
        if (a.dataset.employee2col < b.dataset.employee2col) 
            return -1; 
        if (a.dataset.employee2col > b.dataset.employee2col) 
            return 1; 
        return 0; 
    } 
</script>    




<script>

window.onload = function() {
          var employees1col = 
                document.querySelectorAll("[data-employee1col]"); 
            var employees1colArray = Array.from(employees1col); 
            let sorted1col = employees1colArray.sort(comparator1col); 
            sorted1col.forEach(e1col => 
                document.querySelector("#div-1col"). 
                    appendChild(e1col)); 

          var employees2col = 
                document.querySelectorAll("[data-employee2col]"); 
            var employees2colArray = Array.from(employees2col); 
            let sorted2col = employees2colArray.sort(comparator2col); 
            sorted2col.forEach(e2col => 
                document.querySelector("#div-2col"). 
                    appendChild(e2col)); 
};

</script>
3

Not sure what my eyes were looking at because that was not the solution. Back to the drawing board!

4

I was hoping to use javascript but took the easy way out and used jQuery

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.