當所有div使用相同的類時，在其他div中顯示div數據與jquery

我對jQuery並不熟悉，所以我正在寫這個來獲得你們的幫助。當所有div使用相同的類時，在其他div中顯示div數據與jquery

比方說，我有三個<div> s具有相同的類，但具有不同的信息。刷新時，頁面上只顯示一個帶有數據的<div>。

我做了這個JSFiddle演示。

腳本

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

我的問題

如何顯示在另一個類，（對不起我的英語不好）出現在另一數據，自定義<div>，是不一樣的as「。visible-content」？我的意思是，只有IF .visible-content可見，那麼應該使用.information-from-visible-content類在自定義<div>中顯示來自可見<div>的信息。

我完整的HTML

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

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

<!-- .etc -->

<div class="other-content"> 
    <h1>Other content</h1> 
    <div class="information-from-visible-content"> 
    <!-- 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; }

對不起，我英文不好，並感謝所有的答案！

來源

2014-05-07 Tauras

所以你只想顯示信息，如果div是可見的？ – Darren

你是說如果任何一個'.visible-content'類是可見的，那麼將'.visible-content .information'中的信息顯示到'.other-content .information-from-visible-content'中？ – Se0ng11

是的，我在說，如果.visible-content可見，那麼.information應該顯示在'.information-from-visible-content'中。我不知道如何正確地用英語說，但信息只能從「可見內容」div中顯示，而不能從所有div中顯示。 – Tauras

我不知道如果我得到你的問題的正確意思，試試這個，如果這是你想要的

驗證碼將指派從沒有隱藏

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

檢查這個小提琴。可見內容的信息，我已經更新，http://jsfiddle.net/b3deG/2/

檢查這個搗鼓隱藏白色區域信息，http://jsfiddle.net/b3deG/10/

來源

2014-05-07 02:15:09 Se0ng11

嗯，這很奇怪。如果我正在使用您的代碼，則信息不會從'.visible-content'顯示。如果我在'.information-from-visible-content'手寫信息，那麼信息也不會顯示。 – Tauras

好吧，我的壞，我檢查你的css，你的css實際上隱藏了所有'.visible-content'，所以這就是爲什麼值總是空的，所以當它實際上可見？ – Se0ng11

好吧，我看到你的小提琴，我用你的小提琴，價值顯示在其他內容，這是你想要的東西？ – Se0ng11

你會這樣做使用jQuery遍歷，使用ID或多個類。

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

或

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

在jQuery中還可以使用下一個橫穿該類別的第二個實例（）。

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

上遍歷API文檔將幫助尋找合適的選擇jQuery Traversing

來源

2014-05-07 02:05:56 prkr

就像我說的，我對jquery不友好。我不知道如何正確編寫此代碼：/ – Tauras

我已付出和更新the fiddle檢查，如果這是你想要的。

無論你決定展示什麼div，information-from-visible-content都會顯示該div。

剛剛添加的下面一行到你的提琴：

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

更新

一旦.information-from-visible-content更新，你可以簡單的寫了下面一行：$(divs).hide()。還更新了小提琴。

來源

2014-05-07 02:32:20 Serendipity

兩個答案都有效。但現在我有其他問題。如何隱藏不在紅色背景中的信息？我的意思是，這些信息有重複。在白色空間和紅色空間。 – Tauras

已更新答案以隱藏原始可見div。 – Serendipity

非常感謝！ – Tauras

當所有div使用相同的類時，在其他div中顯示div數據與jquery

回答

相關問題