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
Post a Comment