Question

I have a div that has an attribute called ‘data-prototype’. That attribute ‘data-prototype’ contains some html. Nested inside that html is a select tag that I would like to extract. I know how i get the entire attribute content with jquery but not how to get a specific tag (the select tag in my case). Thank you in advance. Cheers. Marc

JsFiddle: http://jsfiddle.net/gpsw3/

My html:

<div id="some-div" data-prototype="<div><span>something</span><select><option>opt1</option><option>opt2</option></select></div>"></div>

<a id="btn">click</a>

My Jquery:

$(document).on({
            click: function() { 
                $container = $('#some-div');
                alert($container.attr('data-prototype'));
            }
}, '#btn');

Answer 1

You can create a DOM element from the data-prototype‘s content and then find the given element.

var $container = $('#some-div');
var $prototype = $("<div/>").append($container.attr("data-prototype"));
var $select    = $prototype.find("select");

Alternatively, you can use .data() instead of .attr() to access data-* attributes.

See it here.

---

Clarifying $("<div/>").append(...). The .find() function works on descendants, so you need to wrap your content to be able to select the topmost (root) element in your data-prototype attribute.