Related to my earlier question (thanks for your response Cryo), I have a further question for the javaScript mavens here.
Given an html structure like this:
<content>
<div entry>
<div rubric>
<a name>
</div>
<div content block>
<p>
<a links>
</div>
</div entry>
.
.
. multiple identical entry divs
</content>
Using jQuery I wanted to find a given anchor name, and return the whole html markup of its containing entry div, with a new classname, as a string that can be passed to shadowbox's html player like this:
"""
<div newclassname>
<div rubric>
<a name>
</div>
<div content block>
<p>
<a links>
</div>
</div>
"""
The following code does this, but with one wrinkle, it reverses the document order of <div rubric> and <div content block>.
var $pageEntry = null;
jQuery.get('thatPage.html', function(data){
$pageEntry = jQuery(data).find("#content");
});
function displayEntry(entry){
html = $pageEntry.find("a[name='" + entry + "']")
.parent()
.siblings()
.andSelf()
.wrapAll('<div class="newclassname"></div')
.parent()
.parent()
.html()
Shadowbox.open({
options: {
enableKeys: false
},
player: 'html',
content: html
});
};
Can anyone suggest a less verbose jQuery chain that retains the document order of the elements in the returned string? Any helpful suggestions or observations would be welcome. If there's a more straightforward way to do this in straight js, I'd love to know that too.
Thanks,
jjon
update: the answer thanks to comments from Pointy:
elem = $("#content")
.find("a[name=entry]")
.parent()
.parent()
.wrapAll('<div class="new"></div')
.parent()
.html()