How to loop over elements and replace at the same time in jQuery
I'm trying to loop over the children o开发者_如何学Cf body and replace body with the child's HTML. I have this code so far.
<script type="text/javascript">
$(document).ready(function(){
$(':submit').click(function() {
var children = $('body').children();
var arChildren = $.makeArray(children);
for (var i = 0; i < arChildren.length; i++) {
var htmlText = arChildren[i].innerHTML();
$('body').replaceWith(htmlText);
}
});
});
</script>
Could you advise me what am I doing wrong?
clarification: When I first click on button the <body> will be replaced with it's first child, when I second click the body will be replaced with it's second child (but the original) ... then third ... and last, then the button can be inactive. But the button shouldn't dissapear (it's under the body too).
thank you
Use the $.each function.
var new_html = '';
$('body').children().each(function(i, ele){
new_html += $(this).html();
});
$('body').html(new_html);
EDIT: Look at the last jsfiddle, it's probably what you were going for. The other ones were my path in getting there.
http://jsfiddle.net/tDkMV/1/
That should do it for you. Straight-up replacing the contents of body isn't going to work for you because then you'll be removing your button and the child elements etc.
$(function(){
$('input[type=submit]').click(function(){
domObj = $('.replaceableChildren');
// This line really does two things.
// It removes the first child from the objects you're looking for,
// and then takes that removed object and puts it as the html for the 'body'
// (which is a div with class='content')
$('.content').html(domObj.children(':first').remove());
// Disables the button if there's no children left to remove.
if(domObj.children().length <= 0){
$(this).prop('disabled', true);
}
});
});
If you want everything to start off visible then go away, go with something like this:
http://jsfiddle.net/tDkMV/2
If you're really dead-set on replacing everything in body you can try this:
http://jsfiddle.net/tDkMV/4/
This one might require you to 'focus' on the results window, so click in there, and then press any key on your keyboard. There are keycode checks you could do to check if it's the 'enter' key pressed or whatever.
Um and here's me trying to shimmy in the submit button every time :p I think this is exactly what you were looking for (replace body and keep submit button).
http://jsfiddle.net/tDkMV/5/
In the for loop you are replacing the body each iteration, so it will always end up with the HTML from the last child element. Try this:
script type="text/javascript">
$(document).ready(function(){
$(':submit').click(function() {
var children = $('body').children();
var arChildren = $.makeArray(children);
var htmlText='';
for (var i = 0; i < arChildren.length; i++) {
htmlText += arChildren[i].innerHTML;
}
$('body').replaceWith(htmlText);
});
});
</script>
Though I fail to understand what you are trying to acheive with the above code, to make it syntactically correct change:
var htmlText = arChildren[i].innerHTML();
to
var htmlText = arChildren[i].innerHTML;
I would vote for Ryan's answer, since he both gave you the right jquery syntax for 'looping' (not really a loop, which is part of the beauty of jquery) and intuited what you meant to do, I presume-- unless you really did just want the last child element's html. Since you also asked what you were doing wrong, some things to notice about his terse correction might include:
The use of "this" instead of creating a placeholder variable with the confusing (and perhaps reserved?) name "children." 'this' is holding the value of each child.
The use of +=. Rather than overwriting on each iteration, this allows you to grab each value and add it to your pile of values (what you're storing in new_html).
加载中,请稍侯......
精彩评论