Question

有可能这样做吗？我对jQuery并不友好，我也不知道如何正确地做到这一点。

我做了JSFiddle演示。

我有两个div类。一个是隐藏的，另一个是可见的。如何将隐藏的div添加到可见的div，并使隐藏的div在可见的div中可见？我的意思是，如果隐藏的div有内容，那么两个数据都应该在可见的div中可见。

HTML

<div class="content-hidden">hidden content</div>

<div class="content-visible">visible content</div>

CSS

.content-hidden { float:left; width:100px; height:100px; background:red; display:none; }

.content-visible { float:left; width:100px; height:100px; background:blue; }

的jQuery

if($('.content-visible').is(':visible')) {
    // i dont know what to do next
}

抱歉英语不好，谢谢你的回答！

Answer 1

如果我理解正确的话。你可以尝试

if($('.content-visible').is(':visible')) {
    $('.content-hidden').show().appendTo('.content-visible')
}

DEMO

参考

appendTo()。
show()。

Answer 2

最简单的方法：

// select the element(s) by the class-name:
$('.content-hidden')
    // append the element(s) found by that selector to the specified element:
    .appendTo('.content-visible')
    // make the element(s) visible:
    .show();

JS Fiddle demo

否则，您可以执行相同的操作，但切换content-hidden和content-visible类以使移动的div可见：

$('.content-hidden').appendTo('.content-visible')
    // replaces the class-names currently used in the element(s),
    // with the ones not currently used:
    .toggleClass('content-hidden content-visible');

JS Fiddle demo

编辑添加检查以确保元素在追加/移动/显示之前具有内容：

// selecting element(s) by the class-name,
$('.content-hidden')
    // filtering that collection:
    .filter(function(){
        // keeping only those elements for whom the expression returns true
        // (or a truthy value):
               // working on the current-element in the collection:
        return $(this)
                   // getting its contents (childNodes):
                   .contents()
                   // filtering those childNodes:
                   .filter(function(){
                       // again, keeping only those that evaluate to true/truthy:
                              // it has a nodeType:
                       return this.nodeType && 
                              // and that nodeType is either 1 (an element) or 3 (a textNode):
                              (this.nodeType === 1 || this.nodeType === 3);
    }).length;
})
    // appending those retained elements to the '.content-visible' element:
    .appendTo('.content-visible')
    // making them visible by toggling class-names:
    .toggleClass('content-visible content-hidden');

JS Fiddle demo

参考文献：

Answer 3

您可以使用 .show() 来显示隐藏的内容：

if($('.content-visible').is(':visible')) {
    $('.content-hidden').show();
}

<强> Updated Fiddle

Answer 4

if($('.content-visible').is(':visible')) {
    $('.content-visible').append($('.content-hidden').html());
}

如果div是可见的，那么用jQuery显示其他div中的内容

4 个答案: