CODEWITHSUNDEEP
jquerysvg
Hardik Mishra
Hardik Mishra

Reputation: 14877

Get child elements from SVG G element

I am using HighStock charts to prepare charts. HighStock uses SVG to plot HTML in their API.

Here is the generated HTML snippet:

<g class="highcharts-grid" zIndex="1"> 
<g class="highcharts-grid" zIndex="1">
<g class="highcharts-grid" zIndex="1">
<g class="highcharts-grid" zIndex="1">
    <path fill="none" d="M 36 385.5 L 1397 385.5" stroke="#C0C0C0" stroke-width="1" zIndex="1">
    <path fill="none" d="M 36 350.5 L 1397 350.5" stroke="#C0C0C0" stroke-width="1" zIndex="1">
    <path fill="none" d="M 36 420.5 L 1397 420.5" stroke="#C0C0C0" stroke-width="1" zIndex="1">
</g>
<g class="highcharts-grid" zIndex="1">

Now I am using Jquery foreach to get g containing class "highcharts-grid" using:

$('.highcharts-grid').each(function(i, gridLinesArray) {
        // get path from gridLines

    });

Now, some of the elements may contain "path" and some not (As you can see in generated HTML), I want to get array of path elements for each "g" containing them.

Hope I am clear on the question. Please ask for clarification if required.

Upvotes: 0

Views: 2555

Answers (1)

Blender
Blender

Reputation: 298166

I'm not entirely sure what you are doing with them, but this might work for you:

$('.highcharts-grid').each(function(i, gridLinesArray) {
  var paths = $('path', this);
       // or  $(this).find('path');
});

Upvotes: 1

Related Questions