Question

我不熟悉jQuery，所以我写这篇文章是为了得到你们的帮助。

假设我有三个<div>具有相同的类，但信息不同。在刷新时，页面只显示一个包含数据的<div>。

我做了这个JSFiddle演示。

脚本

var divs = $("div.visible-content").get().sort(function(){ 
return Math.round(Math.random())-0.5;
}).slice(0,1)
$(divs).show();

我的问题

如何在另一个班级中的另一个自定义<div>中显示可见数据（对不起我的英语不好），与“ .visible-content “？我的意思是，只有IF .visible-content可见，然后来自可见<div>的信息应显示在<div>类的自定义.information-from-visible-content中。

我的完整HTML

<div class="visible-content"> <div class="information">1</div> </div> <div class="visible-content"> <div class="information">2</div> </div> 

<div class="other-content"> <h1>Other content</h1> <div class="information-from-visible-content">  </div> </div>

CSS

div.visible-content { position:absolute; display:none; } .other-content { float:left; margin:0px 0px; width:100px; height:100px; background:red; } .other-content h1 { float:left; margin:0px 0px; font-size:12px; }

抱歉我的英语不好，谢谢你的所有答案！

Answer 1

我已经分叉并更新the fiddle以检查这是否是你想要的。

无论您决定展示什么div，information-from-visible-content最终都会显示该div。

刚刚在你的小提琴中添加了以下一行：

$(".information-from-visible-content").html($(divs).html());

<强>更新

更新.information-from-visible-content后，您可以简单地编写以下行：$(divs).hide()。更新了小提琴。

Answer 2

我不确定我是否从你的问题中得到了正确的含义，如果这是你想要的话，试试这个

此代码将分配来自未隐藏的.visible-content的信息

$('.other-content .information-from-visible-content').text($('.visible-content:not(:hidden) .information').text())

检查这个小提琴，我已经更新了它，http://jsfiddle.net/b3deG/2/

检查此小提琴是否隐藏白色区域信息，http://jsfiddle.net/b3deG/10/

Answer 3

您可以使用jQuery遍历，使用ID或多个类来执行此操作。

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

或

<div class="content" id="content-1">

在jQuery中，您还可以使用next（）遍历该类的第二个实例。

 $(div).next().append(content-1);

有关遍历的API文档将有助于找到正确的选择器jQuery Traversing

当所有具有相同类的div时，使用jquery在其他div中显示div数据

3 个答案: