Question

我遇到类似这个的问题：

但我的DOM结构是：

<div class="div-class">
    <div class="child-div"></div>
</div>
<table class="table-class"></table>

我希望使用jQuery的输出是：

<div class="div-class">
    <div class="child-div">
        <table class="table-class"></table>
    </div><!--child-class-->
</div><!--div-class-->

但该解决方案的代码不起作用，我试图在循环内部进行，但无济于事。

谢谢。

Answer 1

您可以将其附加到子div或创建一个字符串，然后将其传递到div的html（）中，如下所示。将元素构建为字符串然后将其传递的好处是，您只对DOM进行一次影响 - 如果您在每个tr中附加了很多tr或td，这一点非常重要。

如果你是作为一个lop的一部分这样做 - 那么你可以使用该循环的索引来控制显示或在循环外执行它并使用循环在更新之前将tr添加到str最后的DOM。

注意我添加了一个带有单个td的tr来演示该表。

＆＃13;

$(document).ready(function(){
var str = '';

str += '<table class="table-class">';
  str += '<tr>';
    str += '<td>test</td>';
  str += '</tr>';
 str += '</table>';

$('.child-div').html(str)
})

＆＃13;

table{border: solid 1px #333}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-class">
    <div class="child-div">
    </div><!--child-class-->
</div><!--div-class-->

＆＃13;

Answer 2

您可以尝试这个工作示例。在此示例中，我使用了child-div parent及其下一个元素来预先child-div。

＆＃13;

$('.div-class .child-div').prepend(function() {
  return $(this).parent().next('table');
});

＆＃13;

div { 
  padding: 10px;
  margin: 0 0 10px;
  border: 1px solid #C00; 
}
table { 
  height: 20px;
  border: 1px solid #0C0; 
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-class">
  <div class="child-div"></div>
</div>
<table class="table-class"></table>

<div class="div-class">
  <div class="child-div"></div>
</div>
<table class="table-class"></table>

＆＃13;

Jquery：在子项中的prependTo项

2 个答案: