jquery - HTML: Reverse Order of 4 nested tags -


first of all, think found interesting/similar use case, in order invert order of elements, here on s.o.

anyway, need change order of 4 nested tags <g>, grand-children of first tag g having:

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

this original code:

<!-- change tag g 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 tag g 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 should become:

<!-- change tag g 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(40,3)"></g>        <g class="highcharts-legend-item" zindex="1" transform="translate(30,3)"></g>        <g class="highcharts-legend-item" zindex="1" transform="translate(20,3)"></g>        <g class="highcharts-legend-item" zindex="1" transform="translate(10,3)"></g>     </g>   </g> </g> <!-- don't change tag g 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> 

since have many elements similar 1 first one, identify parent node want modify, came with:

$('.highcharts-legend')[0] 

then, can't go on because don't how select 3 nested tag g class "highcharts-legend-item" in order apply (found in other post):

$top = $('div#thattopdiv'); $top.children('div').slice(1).each(function() {     $(this).insertbefore($top.children().eq(0)); }); 

any gladly appreciated (since jquery not best skill recently)

edit:

1) updated original html source in order have 2 similar parent tags; first 1 modified, other doesn't nee changes)

2) nested tags g have become 4 (not 3) clarify how order should reverse: (10,20,30,40) --> (40,30,20,10)

first of html 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 invert elements

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

Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -