Question

我试图循环身体的孩子并用孩子的HTML替换身体。到目前为止我有这个代码。

 <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>

你能告诉我我做错了什么吗？

澄清：当我第一次点击按钮时，<body>将替换为它的第一个孩子，当我第二次点击时，身体将被替换为它的第二个孩子（但原来的）......然后是第三个...... 。然后，按钮可以处于非活动状态。但是按钮不应该消失（它也在身体下面）。

谢谢

Answer 1

使用$ .each函数。

var new_html = '';
$('body').children().each(function(i, ele){
  new_html += $(this).html();
});
$('body').html(new_html);

Answer 2

编辑：看看最后一个jsfiddle，它可能就是你想要的。其他的是我到达那里的道路。

http://jsfiddle.net/tDkMV/1/

那应该为你做。直接替换身体的内容对你不起作用，因为那时你将删除你的按钮和子元素等。

$(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);
        }
    });
});

如果你想让所有东西都开始可见，那么就走开，去做这样的事情：

http://jsfiddle.net/tDkMV/2

如果你真的死定了替换身体的一切，你可以试试这个：

http://jsfiddle.net/tDkMV/4/

这个可能要求您“关注”结果窗口，因此请单击其中，然后按键盘上的任意键。您可以执行键盘检查以检查是否按下了“输入”键或其他任何内容。

嗯，这是我每次都试图在提交按钮中摆动：p我认为这正是你要找的（替换正文并保持提交按钮）。

http://jsfiddle.net/tDkMV/5/

Answer 3

在for循环中，每次迭代都会替换正文，因此它总是以最后一个子元素的HTML结束。试试这个：

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>

Answer 4

虽然我无法理解您尝试使用上面的代码实现的目标，但要在语法上做出正确的更改：

var htmlText = arChildren[i].innerHTML();

到

var htmlText = arChildren[i].innerHTML;

Answer 5

我会投票支持Ryan的答案，因为他给了你正确的'循环'的jquery语法（不是真正的循环，这是jquery之美的一部分）并且直觉你的意思，我认为 - 除非你真的只想要最后一个子元素的html。既然你也问过你做错了什么，关于他的简洁修正的一些注意事项可能包括：

使用“this”而不是使用令人困惑（也许是保留？）的名称“children”来创建占位符变量。 '这个'保持着每个孩子的价值。

使用+ =。这不是覆盖每次迭代，而是允许您获取每个值并将其添加到您的一堆值（您在new_html中存储的内容）。

如何循环遍历元素并在jQuery中同时替换

5 个答案: