0

私が達成しようとしているのは、入力ボタンを除いて、すべてを div に追加したいということです。notおそらくJqueryでメソッドを使用できる方法はありますか? また、最初のスパンブロックのみをターゲットにしています。例のフィドルは次のとおりです。

http://jsfiddle.net/HjFPR/64/

JQuery

(function(){
    $('.select_listing').on('click',function () {
       $('.saved_listing').append($(this).parent().find('span').html());
    });
})();​

HTML

<div class="boxes"> 
    <span> Matt </span>
    <span> 123 Fake Street </span>
    <input type="button" class="select_listing" value="add">
</div>

<div class="boxes"> 
    <span> James </span>
    <span> 123 Real Street </span>
    <input type="button" class="select_listing" value="add">
</div>

<div class="saved_listing"> </div>
​
4

6 に答える 6

2

私はこれがうまくいくと思います：

(function(){

    $('.select_listing').on('click',function () { 
        $('.saved_listing').append($(this).parents(".boxes").find('span'));
    });

})();​

お知らせ下さい。

編集

ここでフィドル: http://jsfiddle.net/9NBKN/

要素を動かしているように見えますが、それを望んでいましたか? それとも要素をコピーしますか?

編集 2

要素を移動する代わりにフィドルを更新してコピーします: http://jsfiddle.net/9NBKN/3/ (基本的に「クローン」メソッドを使用しました)。

于 2012-12-21T17:15:40.493 に答える
2

これがあなたの目的ですか？

(function(){
    $('.select_listing').on('click',function () {
        // Create a copy of .boxes and append to .saved_listing
        var htmlContent = $(this).closest('.boxes').clone().appendTo('.saved_listing');
        // Remove input
        htmlContent.find('input').remove();
    });
})();
于 2012-12-21T17:19:59.270 に答える
1

これを試して：

http://jsfiddle.net/HjFPR/66/

(function() {

    $('.select_listing').on('click', function() {
        // Get the parent, and clone it!
        var pdiv = $(this).parents('.boxes').clone();

        // In the cloned parent, remove the button!
        pdiv.find("input.select_listing").remove();

        // Append to saved_listing the modified pdiv!
        pdiv.appendTo(".saved_listing");
    });

})();​
于 2012-12-21T17:19:17.680 に答える
0

each()すべての兄弟を実行するだけです。

http://jsfiddle.net/HjFPR/72/

(function(){

    $('.select_listing').on('click',function () {

        $(this).siblings().each(function() {            
            $('.saved_listing').append($(this).html());
        });

    });

})();​

編集: そうすれば、下にトラバースするために不必要に上にトラバースすることはありません。

于 2012-12-21T17:32:50.093 に答える
0

あなたの問題はこの行です.find('span').html()

このステートメントは、クエリされた最初のスパンのみの html を取得します。そのような場合はループする必要があります..

以下のアプローチを試してください..

(function() {

    $('.select_listing').on('click', function() {
        var $this = $(this);
        var $span = $this.closest('div.boxes').find('span');
        var html = '';
        $span.each(function() {
            html += $(this).html();
        });
        $('.saved_listing').append(html);
    });

})();​

フィドルをチェック

于 2012-12-21T17:20:50.843 に答える
0

これを試すことができます：

$(".boxes").children().not("input[type='button']")

not() 関数は、セレクタ内の要素を除外します

于 2012-12-21T17:22:06.960 に答える