3

私はjqueryが初めてです。コンテンツの移動についてサポートが必要です。追加メソッドを使用しています。

各 the.links 要素を .node 要素内の各 .submitted 要素に移動できるようにしたいと考えています。現在、append は 3 つの .link すべてを各 .selected 要素に追加しています。コードと JSFiddle へのリンクを以下に示します。

ご協力いただきありがとうございます

ここをクリックして JSFiddle のコードを表示

jQuery

​$('.links').appendTo('.submitted');​​​​​​​​​​​​​​​​​

HTML

<div id="wrapper">
    <div class="node" class="clearfix">
        <h2>Node Title 1</h2>
        <div class="submitted">September 30</div>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin egestas mi, ac luctus orci eleifend pharetra</div>
        <div class="links">
            <a href="#">Node 1 Link 1</a> | 
            <a href="#">Node 1 Link 2</a>
        </div>
    </div>

    <div class="node" class="clearfix">
        <h2>Node Title 2</h2>
        <div class="submitted">September 29</div>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin egestas mi, ac luctus orci eleifend pharetra</div>
        <div class="links">
            <a href="#">Node 2 Link 1</a> | 
            <a href="#">Node 2 Link 2</a>
        </div>
    </div>

    <div class="node" class="clearfix">
        <h2>Node Title 3</h2>
        <div class="submitted">September 26</div>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin egestas mi, ac luctus orci eleifend pharetra</div>
        <div class="links">
            <a href="#">Node 3 Link 1</a> | 
            <a href="#">Node 3 Link 2</a>
        </div>
    </div>
</div>​

CSS

#wrapper { width:600px; margin:0 auto; }
h2 { clear:both; }
.node { border-bottom:1px solid #CCCCCC; }
.submitted { float:left; width:200px; padding:10px; background-color:#CCCCCC; }
.content { float:left; width:360px; padding:10px; }
4

5 に答える 5

4

これを行うとき

$('.links').appendTo('.submitted')

クラスを持つすべての要素を選択し、それらをクラスを持つすべての要素.linksに追加しています.submitted

編集

今、私はあなたが何を望んでいるのか理解しました:)

これはそれを修正します

$(".links").each(function(){
    $(this).appendTo( $(this).prevAll('.submitted') );
});

ここで動作することを確認してください：http://jsfiddle.net/RASG/SGgM8/8/

ss

于 2012-09-30T18:16:35.137 に答える
1

以下を試してください。

$('.links').each(function() {
   var $this = $(this);
   $this.appendTo($this.siblings('.submitted'));
})

http://jsfiddle.net/PwJNe/

マークアップが無効であることに注意してください。これを変更してください。

<div class="node" class="clearfix">

に：

<div class="node clearfix">
于 2012-09-30T18:28:21.573 に答える
0

私が正しく理解していれば、あなたはこれを持っています：

<div class="node" class="clearfix">
    <h2>Node Title 3</h2>
    <div class="submitted">September 26</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin egestas mi, ac luctus orci eleifend pharetra</div>
    <div class="links">
        <a href="#">Link 1</a> | 
        <a href="#">Link 1</a>
    </div>
</div>

そして、あなたはそれがこのようになることを望みます：

<div class="node" class="clearfix">
    <h2>Node Title 3</h2>
    <div class="submitted">
        September 26
        <a href="#">Link 1</a> | 
        <a href="#">Link 1</a>
    </div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin egestas mi, ac luctus orci eleifend pharetra</div>
    <div class="links">
    </div>
</div>

子要素をdiv.linksからdiv.submittedに移動します。

それが正しければ、次のようなことができます。

$(".node").each( function() {
     //Get the links
     var links = $(this).children(".links").html();
     //Remove the links from the .links div
     $(this).children(".links").html("");
     //Append the links to the .submitted div
     $(this).children(".submitted").append(links);
});

これにより、DOMで見つかったすべての.node要素が繰り返されます。.eachブロック内の$（this）は、.node要素を参照します。

それが役に立てば幸い！

于 2012-09-30T18:36:09.847 に答える
-1

3 つの要素ごとに 3 つのリンク.linksが追加されます.submitted

1つだけ追加するには、.first()またはいくつかのjqueryフィルターで制限します

あなたのフィドルから分岐した例: http://jsfiddle.net/LMbzY/

于 2012-09-30T18:23:18.477 に答える