CODEWITHSUNDEEP
jqueryhtml
fatherazrael
fatherazrael

Reputation: 5957

How to get ID, class and name of child divs from Parent Div ID in JQuery?

How to get ID's of child div's have "ClonablePart class" in following HTML?

<div id="Finance_panel" class="panel>
 <div id="Finance_panel1" class="panel clonablePart"></div>
 <div id="Finance_panel2" class="panel clonablePart"></div>
 <div id="Finance_panel3" class="panel clonablePart"></div>
</div>

Fiddle for demo: https://jsfiddle.net/tL9spngx/1/

Upvotes: 0

Views: 2065

Answers (3)

Gerry
Gerry

Reputation: 648

First, you should fix the HTML because it has a typo that could cause errors; add a double quote at the end of the class value of the first div.

To get the id's of the target elements, first select the target elements. Then, loop through the elements to do whatever it is you want to do with the id's, for example, console.log them, change them, add them to an array, concatenate them, etc.

So, using this HTML (typo fixed):

<div id="Finance_panel" class="panel">
    <div id="Finance_panel1" class="panel clonablePart"></div>
    <div id="Finance_panel2" class="panel clonablePart"></div>
    <div id="Finance_panel3" class="panel clonablePart"></div>
</div>

You can use this JS to get the desired id's:

$("#Finance_panel").find(".clonablePart").each(function () {
    var id = this.id;

    // Replace the console.log statement below with whatever operation you want to perform with the id
    console.log("The id of this div is " + id);
});

JSFiddle

Upvotes: 1

Ravi Patel
Ravi Patel

Reputation: 763

User attr property of jquery to get any HTML tag attributes

var lengthPanel = $("#Finance_panel").find('.clonablePart');
var class = lengthPanel.attr('class');
var id = lengthPanel.attr('id');
var style = lengthPanel.attr('style');

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

You can use .map() function to get the object of returned properties in it along with .get() to convert into array: 

$('#Finance_panel .clonablePart').map(function(){
  return this.id;
}).get();

Working Demo

Upvotes: 1

Related Questions