Jquery附加特定标记

Question

我想要实现的是我想在div中附加所有内容，输入按钮除外。有没有办法可以在Jquery中使用not方法？此外，它只针对我的第一个跨度块。这是一个小例子：

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>
​

Answer 1

我认为这可行：

(function(){

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

})();​

让我知道。

修改

在这里小提琴：http://jsfiddle.net/9NBKN/

它似乎移动元素，你想要吗？或者你想要复制元素吗？

修改2

更新小提琴以复制而不是移动元素：http://jsfiddle.net/9NBKN/3/ （基本上我使用了“克隆”方法）。

Answer 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();
    });
})();

Answer 3

试试这个：

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");
    });

})();​

Answer 4

问题在于这一行.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);
    });

})();​

<强> Check Fiddle

Answer 5

你可以试试这个：

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

not（）函数将过滤出选择器

中的元素

Answer 6

只需在所有兄弟姐妹中运行each()。

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

(function(){

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

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

    });

})();​

修改 这样，你就不必经过不必要的遍历。