non-html elements
non-html elements
Hi,
I posted this message to the user mailing list a while ago but got no
response. Not sure if that's because no-one knew the answer or if its
just a silly question. Hopefully someone here can enlighten me.
Are you supposed to be able to use jquery to search for non-html
elements? I've got a web-app that is sending out xrefs (basically
placeholders for snippets of html) which are recursively expanded
by jquery using the following function.
function expand_refs (context) {
$("xref",context||document).each(function (i) {
var rpl = cache[$(this).attr("ref")]||0;
if(rpl){
var cntxt = $(rpl).insertAfter(this);
$(this).remove();
expand_refs(cntxt);
}
});
}
This seems to work ok for some cases but I'm having trouble with a
select list. The options inside are not being expanded. The
following example illustrates the behaviour. It should display a page
that looks like follows...
one
two [one]
three
When expand_refs gets around to expanding "MYSELECT", it can't find
any xrefs and so stops expanding that sub-tree (and consequently fails
to render the "one" inside the select box.
Cheers,
Andy
<html>
<head>
<title></title>
<script type='text/javascript'>
cache = {
D2899 : "<div id='D2899'><xref ref='D2900'></xref><xref
ref='D2901'></xref><xref ref='D2902'></xref></div>" ,
D2900 : "<div id='D2900'><span id='S2903'>one</span></div>" ,
D2901 : "<div id='D2901'><span id='S2904'>two</span><xref
ref='MYSELECT'></xref></div>" ,
MYSELECT : "<select id='MYSELECT'><xref ref='O2906'></xref></
select>" ,
O2906 : "<option id='O2906'><span id='S2907'>one</span></
option>" ,
D2902 : "<div id='D2902'><span id='S2908'>three</span></
div>" };
</script>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript'>
function expand_refs (context) {
$("xref",context||document).each(function (i) {
var rpl = cache[$(this).attr("ref")]||0;
if(rpl){
var cntxt = $(rpl).insertAfter(this);
$(this).remove();
expand_refs(cntxt);
}});
}
$(document).ready(function(){
expand_refs();
});
</script>
<style type='text/css'></style>
</head>
<body>
<div id='banner'>
<h1></h1>
</div>
<div id='content'>
<div id='D2899'>
<xref ref='D2900'></xref>
<xref ref='D2901'></xref>
<xref ref='D2902'></xref>
</div>
</div>
</body>
</html>