Question

我有以下页面流程：

<div class="red">
    <div id="a"><!-- 'content-a' should be here --></div>
    <div id="b"><!-- 'content-b' should be here --></div>
    <div id="c"><!-- 'content-c' should be here --></div>
</div>

<div class="gray">
    <div id="content-a">This is the content a</div>
    <div id="content-b">This is the content b</div>
    <div id="content-c">This is the content c</div>
</div>

http://jsfiddle.net/rwsu443L/

我想在 a div中显示 content-a ，在 b 中显示 content-b strong> div和 c div中的 content-c 。这是从一个地方到另一个地方的交换。我怎么能用JQuery做到这一点？

Answer 1

＆＃13;

$('.red div').each(function() {
  var id = $(this).attr('id');
  $(this).append($('#content-' + id));
});

＆＃13;

.red {
  color: red;
}
.gray {
  color: gray;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="red">
    <div id="a"><!-- 'content-a' should be here --></div>
    <div id="b"><!-- 'content-b' should be here --></div>
    <div id="c"><!-- 'content-c' should be here --></div>
</div>

<div class="gray">
    <div id="content-a">This is the content a</div>
    <div id="content-b">This is the content b</div>
    <div id="content-c">This is the content c</div>
    <div>This will not be swapped</div>
</div>

＆＃13;

在页面底部加载内容并将其放置在正确的位置

1 个答案: