take a fragment of HTML code, apply a unique id and place on page
I want to take a fragment of HTML code containing some radio buttons, apply a unique id and label identifier, then place them on the page. ...As usual I am having trouble with the jQuery selectors
** Update - I revised question with working example *
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css' />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.min.js'></script>
<script type='text/javascript' src='http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js'></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<div id="placeholderA">content goes here.</div>
<div id="placeholderB">content goes here.</div>
<div id="placeholderD">content goes here.</div>
<div id="placeholderC">content goes here.</div>
<div id="placeholderE">content goes here.</div>
<div id="placeholderF">content goes here.</div>
<div id="placeholderG">content goes here.</div>
</div>
<a href="#" data-icon="check" id="preShowHTML" data-iconpos="none">Show HTML</a>
<pre><div id="HTMLOut"></div></pre>
</div>
</body>
</html>
<script>
$(document).ready(function(){
// buttons have to be added to multiple groups on the page
var groups2 = ['A','B','C','D','E','F'] ;
for (var groupLetter in groups2){
// clone fragment of html
myClone = $(dataType);
// create a unique id name for first radio box
// (we do this because jquery mobile will fail if duplicate id's or label for's exist...)
name = "preConfigRadio-" + groups2[groupLetter] + "1";
// apply id name to first radio box
myClone.find('input[name="myRB"]:eq(0)').attr("id", name);开发者_JAVA技巧
myClone.find('label[name="myRB"]:eq(0)').attr("for", name);
// apply id name to second radio box
name = "preConfigRadio-" + groups2[groupLetter] + "2";
myClone.find('input[name="myRB"]:eq(1)').attr("id", name);
myClone.find('label[name="myRB"]:eq(1)').attr("for", name);
// apply id name to third radio box
name = "preConfigRadio-" + groups2[groupLetter] + "3";
myClone.find('input[name="myRB"]:eq(2)').attr("id", name);
myClone.find('label[name="myRB"]:eq(2)').attr("for", name);
// then append
myClone.appendTo("#placeholder"+groups2[groupLetter]).trigger('create');
}
/* Toggle Show/Hide HTML */
$('#preShowHTML').click(function() {
$("#HTMLOut").text($("body").html());
$("#HTMLOut").toggle();
return false;
});
});
dataType = "<fieldset data-role='controlgroup' data-type='horizontal'>\n\
<input type='radio' name='myRB' id='' checked='checked' value='C' /><label name='myRB' for=''>A</label>\n\
<input type='radio' name='myRB' id='' value='T' /><label name='myRB' for=''>B</label>\n\
<input type='radio' name='myRB' id='' value='P' /><label name='myRB' for=''>C</label>\n\
</fieldset>";
</script>
Your syntax is a little incorrect.
myClone.('input[@name="myRB"]')[0].attr("id", name);
- You're trying to call a function with no name which isn't possible
- (You can remove the
@) - (You can use
:eq(n)instead of[n])
So you might want this instead:
myClone.find('input[name="myRB"]:eq(0)').attr("id", name);
etc.
http://api.jquery.com/find/
加载中,请稍侯......
精彩评论