get a specific id value from a html string in javascript via jquery

Question

I have this html string in a javascript variable and want to get the id value.

I converted it to pure html and than I tried to get the id value of the div.

var rowData = "<div class='multiid' id='3041' style='height:100%;' >test</div>";
var multiidhtml = $(rowData);
var multiid = multiidhtml.find('.multiid').attr("id");

The result should be var multiid = 3041 but it does not work.

You don't need to do the find as the .multiid is the top level element in your jquery object — Pete
– Pete, Commented Dec 21, 2018 at 10:46

Mamun · Accepted Answer · 2018-12-21 10:59:15Z

4

The attribute id you are looking for is in the jQuery object itself. But find(.multiid) looks for elements with class multiid inside the object (as nested elements) which does not realy exists and the attr() returns undefined.

Try multiidhtml.attr("id");

var rowData = "<div class='multiid' id='3041' style='height:100%;' >test</div>";
var multiidhtml = $(rowData);
var multiid = multiidhtml.attr("id");
console.log(multiid);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Consider the following example where you can use find() meaningful:

var rowData = "<div id='3041' style='height:100%;' >test <p class='multiid' id='myParagraph'>Nested P</p></div>";
var multiidhtml = $(rowData);
var multiid = multiidhtml.find('.multiid').attr("id");
console.log(multiid);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

edited Dec 21, 2018 at 10:59

answered Dec 21, 2018 at 10:47

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Barmar · Accepted Answer · 2018-12-21 10:48:30Z

3

.find() searches the descendants of the element, it won't match the element itself. You should wrap the HTML in another DIV so it won't be the top-level element.

var multidhtml = $("<div>", {html: rowData});
var multiid = multidhtml.find(".multiid").attr("id");

This is only necessary if .multiid might not be the top-level element. If it's always the top, use the simpler solution in the other answer.

answered Dec 21, 2018 at 10:48

Barmar

789k57 gold badges555 silver badges669 bronze badges

Comments

Sushil · Accepted Answer · 2018-12-21 12:02:34Z

1

.find() searches the descendants of the element, it won't match the element itself. SO use .closest() so that it searches from the root of selector DOM

var rowData = "<div class='multiid' id='3041' style='height:100%;' >test</div>";
var multiidhtml = $(rowData);
var multiid = multiidhtml.closest('.multiid').attr("id");

if you're sure that id attribute exists in the selected DOM you can directly find like this

multiid = multiidhtml.attr("id");

edited Dec 21, 2018 at 12:02

answered Dec 21, 2018 at 11:47

Sushil

1,1311 gold badge10 silver badges24 bronze badges

Comments

KIMBERLY · Accepted Answer · 2018-12-29 16:14:32Z

1

var rowData = "<div id='3041' style='height:100%;' >test <p class='multiid' id='myParagraph'>Nested P</p></div>";
var multidhtml = $("<div>", {html: rowData});
var multiid = multidhtml.find(".multiid").attr("id");

answered Dec 29, 2018 at 16:14

KIMBERLY

563 bronze badges

Collectives™ on Stack Overflow

get a specific id value from a html string in javascript via jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related