jQuery: Using Selectors on HTML from an Attribute

Question

Hi,

I have some HTML that is stored as an attribute on a tag. I can access it in jQuery using

$("input[id$='_myField_hiddenSpanData']").attr("value")

This looks like this:

"<span id='spantest\user' tabindex='-1' contentEditable='false' class='ms-entity-resolved' title='test\user'><div style='display:none;' id='divEntityData' key='test\user' displaytext='Test User' isresolved='True' description='test\user'><div data=''></div></div><span id='content' tabindex='-1' contenteditable onMouseDown='onMouseDownRw();' onContextMenu='onContextMenuSpnRw();' >Test User</span></span>"

I would need the value of the key attribute (test\user). Can I somehow tell jQuery to parse a block of HTML and apply selectors to it? I found I can wrap it into a new jQuery object by wrapping it into another $(): $($("input[id$='_myField_hiddenSpanData']").attr("value")) but I still did not manage to apply a selector on it.

Any hints? And no, sadly I do not control the markup that generates the hidden field.

Answer 1

Wrap your crappy markup with a jQuery object, and then use the find function to apply a selector to it...

var crappyHtml = $("input[id$='_myField_hiddenSpanData']").attr("value");
var key = $(crappyHtml).find("div[key]").attr("key");
alert(key);

Answer 2

You should be able to pass it as a context. Does this work?:

$('#divEntityData', $($("input[id$='_myField_hiddenSpanData']").attr("value"))).attr('key');

Answer 3

Try this:

var html = $("input[id$='_myField_hiddenSpanData']").attr("value");
var user = $(html).find("#divEntityData").attr("key");
alert("user=" + user);