How to get the attribute's value from outerHTML's text?

Question

How do I get the attribute's value from "data-column" in the outerHTML text?

$.each($groupingColumnUl[0].children, function(i1, o1) {
   alert(o1.outerHTML.prop('data-column');  //.attr('data-column');  //.find('data-column');
});

The actual value inside the outerHTML is

<li class='ui-state-default' data-column='Model'><span style='display:inline-block;' class='ui-icon ui-icon-close'></span>Model</li>

I want to get the value "Model"

why not just use $(o1).data("column")? BTW outerHTML returns a string not a jQuery object. data doc — Patrick Evans
– Patrick Evans, Commented Oct 2, 2013 at 16:25
Here's an interesting article saying dont use "data()" function... lookfirst.com/2011/12/dont-use-jquery-data-method-use-attr.html — fletchsod
– fletchsod, Commented Oct 2, 2013 at 16:37
@fletchsod, that is a nearly 2 year old article and the situation that it points out has been fixed — Patrick Evans
– Patrick Evans, Commented Oct 3, 2013 at 9:25

Oliboy50 · Accepted Answer · 2013-10-02 16:35:18Z

2

Try.

$.each($groupingColumnUl[0].children, function(i1, o1) {
   alert($(o1).data('column'));
});

or (if older JQuery version) :

$.each($groupingColumnUl[0].children, function(i1, o1) {
   alert($(o1).attr('data-column'));
});

edited Oct 2, 2013 at 16:35

answered Oct 2, 2013 at 16:29

Oliboy50

2,7513 gold badges32 silver badges37 bronze badges

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

3 Comments

Patrick Evans Over a year ago

o1 is already a DOM object so you cannot use get on it. Even if o1 was a jQuery object all you are doing is getting the DOM object and then rewrapping it with jQuery.

Oliboy50 Over a year ago

Sorry... mistake due to a lack of information... The OP is using DOM object with JQuery functions... =-= Edited but i still don't know if it's good.

fletchsod Over a year ago

Interesting. The attr() works even though I'm using JQuery version 2.0 but data() returned undefined. Looking at the jquery documentation, it said data() would return undefined if the data is not set but once set then data() will return the value. Interesting...

Bala Kumar · Accepted Answer · 2015-03-06 12:08:42Z

2

OuterHTML Text :

<input id ="UserControl" value ="New Custmer" defaultvalue="Cust415875" clientcontrolname = "CusterInfo">

Geting clientcontrolname (attribute) value from outerHTML :

    var strGrpAssoc = oGrpAssoc.outerHTML + "</input>";
    var xmlGrpAssoc = loadXMLString(strGrpAssoc.toLowerCase());
    var sClientControlName = xmlGrpAssoc.getElementsByTagName("input")[0].getAttribute("clientcontrolname"); 

function loadXMLString(txt) {
    if (window.DOMParser) {
        parser = new DOMParser();
        xmlDoc = parser.parseFromString(txt, "text/xml");
    }
    else // code for IE
    {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        xmlDoc.loadXML(txt);
    }
    return xmlDoc;
}

edited Mar 6, 2015 at 12:08

answered Mar 6, 2015 at 11:30

Bala Kumar

6753 gold badges11 silver badges19 bronze badges

Comments

Valentin Kantor · Accepted Answer · 2013-10-02 16:25:14Z

0

outerHTML gives you a sting, not a jQuery object, so if you want to access the data attribute of an element via jQuery API, you can try:

alert($(o1.outerHTML).data('column')

answered Oct 2, 2013 at 16:25

Valentin Kantor

1,8742 gold badges24 silver badges31 bronze badges

1 Comment

Valentin Kantor Over a year ago

if you will post your code to jsfiddle, we can try to discover this error.

Murali Murugesan · Accepted Answer · 2013-10-03 08:40:44Z

0

Try the below

alert($(o1).data('column'));

edited Oct 3, 2013 at 8:40

answered Oct 2, 2013 at 16:25

Murali Murugesan

22.6k18 gold badges76 silver badges124 bronze badges

1 Comment

Patrick Evans Over a year ago

o1 is not a jQuery object, it is a DOM object. Also this would get the parents data, OP was using outerHTML which just gets that dom object's html not the parents.

Collectives™ on Stack Overflow

How to get the attribute's value from outerHTML's text?

4 Answers 4

3 Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related