Fabio Fantoni February 2016

HTML: Reverse Order of 4 nested tags

First of all, I think I found an interesting/similar use case, in order to invert the order of some elements, here on S.O.

Anyway, I need to change the order of JUST 4 nested tags <g>, grand-children of the first tag g having:

<g class="highcharts-legend" zIndex="7" transform="translate(565,0)">

This is the original code:

<!-- CHANGE this tag g with trasnform="translate(565,0)"  -->
<g class="highcharts-legend" zIndex="7" transform="translate(565,0)">
  <g zIndex="1">
    <g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(10,3)"></g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(20,3)"></g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(30,3)"></g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(40,3)"></g>
    </g>
  </g>
</g>
<!-- DON'T CHANGE this tag g with trasnform="translate(580,0)"  -->
<g class="highcharts-legend" zIndex="7" transform="translate(580,0)">
  <g zIndex="1">
    <g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(1,3)"></g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(2,3)"></g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(3,3)"></g>
       <g class="highcharts-legend-item" zIndex="1" transform="translate(4,3)"></g>
    </g>
  </g>
</g>

And this is what should become:

<!-- CHANGE this tag g with trasnform="translate(565,0)"  -->
<g class="highcharts-legend" zIndex="7" transform="translate(565,0)">
  <g zIndex="1">
    <g>
       <g class="highcharts-legend        

Answers


Dharmik February 2016

You can do it like this,

//you can write below code inside function and call it when require.

var element = $('.highcharts-legend').find(".highcharts-legend-item:last") 
$(element).insertBefore($('.highcharts-legend').find(".highcharts-legend-item:first"))


Alexey Obukhov February 2016

First of all your html is incorrect. 'g' tag must have closing tag.

<g class="highcharts-legend" zindex="7" transform="translate(565,0)">
    <g zindex="1">
        <g>
            <g class="highcharts-legend-item" zindex="1" transform="translate(8,3)"></g>
            <g class="highcharts-legend-item" zindex="1" transform="translate(82,3)"></g>
            <g class="highcharts-legend-item" zindex="1" transform="translate(159,3)"></g>
        </g>
    </g>
</g>

jQuery code to invert elements

var $parent = $('.highcharts-legend>g>g');
var $children = $parent.children();
$parent.append($children.get().reverse());

Post Status

Asked in February 2016
Viewed 3,679 times
Voted 6
Answered 2 times

Search




Leave an answer