0

私は2つのリストを持っています。順序付けされていないリストと、リストとして機能しているdivのセット。順序付けられていないリストには4つのリスト項目があり、4つのdivもあります。

私が達成しようとしているのは、各divから見出しをコピーして、各リスト項目に配置することです。つまり、最初のdivの見出しは、最初のlist-itemの見出しに対応している必要があります。

これまでに達成できたのは、divをループして、以下に示すようにコピーしたい見出しに警告することだけですが、どのように進めるかがわかりません。

<div class="container">
    <div class="nav-list">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
     </div>
    <div class="tab-list">
        <div class="tab-item">
            <h3>To be copied</h3>
        </div>
        <div class="tab-item">
            <h3>To be copied</h3>
        </div>
        <div class="tab-item">
            <h3>To be copied</h3>
        </div>
        <div class="tab-item">
            <h3>To be copied</h3>
        </div>
    </div>
</div>


$('.tab-list .tab-item').each(function(index) {
    alert(index + ': ' + $(this).children('h3').text());
});
4

4 に答える 4

1

これを試して：

$('.tab-list .tab-item').each(function(index) {
    $('.nav-list').children('ul').children().eq(index).html($(this).children('h3').text());
});
于 2012-05-10T09:10:49.980 に答える
0

このフィドルはトリックを行う必要があります：http：//jsfiddle.net/pndCd/

于 2012-05-10T09:09:51.003 に答える
0

これを試して：

var list = $('.nav-list li');
$('.tab-list .tab-item').each(function(i) {
    list.eq(i).text($(this).find('h3').text())
});

http://jsfiddle.net/EDpM7/を参照してください

于 2012-05-10T09:09:58.540 に答える
0

これを試して：

$('.tab-list .tab-item').find('h3').each(function(index) {
    that = $(this).text();
    $('li').eq(index).text(that + $('li').eq(index).text())
});

http://jsfiddle.net/kuFDT/3/

h3テキストをコピーする代わりに、タグのクローンを作成することもできます。

$('.tab-list .tab-item').find('h3').each(function(index) {
    that = $(this).clone();
    $('li').eq(index).before(that)
});

http://jsfiddle.net/kuFDT/14/

于 2012-05-10T09:13:06.470 に答える