jquery選擇一個類嵌套在另一個類

好吧，所以我慢慢學習jquery，需要一些幫助，我環顧四周，嘗試了一些沒有運氣的東西。反正我有一個HTML DOM結構是這樣的：jquery選擇一個類嵌套在另一個類

<div id='foo'> 
    <div class='1'> 
     <div class='a'></div><div class='b'> </div 
    </div> 
    <div class='2'> 
     <div class='a'></div><div class='b'> </div> 
    </div> 
    <div class='3'> 
     <div class='a'></div><div class='b'> </div> 
    </div> 
</div>

我想要做到的是，當我點擊一個按鈕（1,2,3全部）我的jQuery節目的裏面只有foo各自的類或者全部是所有課程。例如：我點擊按鈕1的DOM看起來像這樣

<div id='foo'> 
    <div class='1'> 
     <div class='a'></div><div class='b'> 
    </div> 
</div>

現在我已經嘗試使用下面的命令的做這個，我已經從解決方案的其它類似職位上找到的所以沒有運氣：（我有所有的情況下工作，但沒有個別情況下）

$("#foo").find(".1").fadeOut(); 
$("#foo .1").fadeOut(); 
$("#foo > .1").fadeOut(); 
$("#foo, .1").fadeOut(); // this just fades out all of foo

so我該如何做到這一點？這樣我就能得到我想要的結果，或者我錯過了某個主要概念，而這是不可能的？

註上編輯：我已經編輯到正常關閉的股利...這是我無意中做的例子很多，從整個代碼簡化

來源

2013-05-06 brendosthoughts

您想要淡化哪些類？ – 2013-05-06 09:40:34

你有你的代碼包裝在document.ready？代碼的前三個代碼應該可以工作。 – 2013-05-06 09:41:36

你的類名應該以字母（_specs_） – 2013-05-06 09:42:38

裏有標記，這是一些未關閉的div標籤會影響淡入淡出。

<div id='foo'> 
    <div class='1'> 
     <div class='a'></div><div class='b'></div> <!-- missing div --> 
    </div> 
    <div class='2'> 
     <div class='a'></div><div class='b'></div> <!-- missing div --> 
    </div> 
    <div class='3'> 
     <div class='a'></div><div class='b'> </div> <!-- missing div --> 
    </div> 
</div>

有了固定的，我們可以添加按鈕標記：

HTML

<div id='foo'> 
    <div class='1'> 
     <div class='a'>a1</div><div class='b'>b1</div> 
    </div> 
    <div class='2'> 
     <div class='a'>a2</div><div class='b'>b2</div> 
    </div> 
    <div class='3'> 
     <div class='a'>a3</div><div class='b'>b3</div> 
    </div> 
</div> 
<button class="toggle">Show 1</button> 
<button class="toggle">Show 2</button> 
<button class="toggle">Show 3</button>

然後腳本切換他們

的Javascript

$("button.toggle").click(function(){ 
    $("#foo>div:not('." + $(this).index()+"')").fadeOut(); 
});

/*請注意，這依賴於按鍵被放置在順序*/

工作實例http://jsfiddle.net/5vzCe/1/

來源

2013-05-06 09:43:45

對不起，這是一個錯誤，div的不是在我真正的代碼中缺少的，我急匆匆地縮短了它的頁面實際上我試圖做的這個頁面我編輯了這個問題 – brendosthoughts 2013-05-06 09:45:30

感謝您的幫助我要採取所有人的建議並看看如果我可以解決我的確切問題 – brendosthoughts 2013-05-06 09:58:22

@brendanmorrison祝你好運，你需要把任何腳本，需要在頁面加載執行在'文檔。ready' – 2013-05-06 10:00:30

好吧，雖然我不知道你將如何去實際切換首次點擊後，知名度...

$('.a').click(function(){ 
    $('#foo > div').not($(this).parent()).remove(); 
});

Also.fix那些關閉</div>標籤打開你<div class='b'>元素之後。

來源

2013-05-06 09:45:56 Ohgodwhy

感謝您的幫助我要採取所有的建議，從每個人，看看如果我能解決我的確切問題 – brendosthoughts 2013-05-06 09:59:03

我會給某一類（比如btn）到您的按鈕來表示元素的組：

<div id='foo'> 
    <div class='btn 1'> 
     <div class='a'></div><div class='b'></div> 
    </div> 
    <div class='btn 2'> 
     <div class='a'></div><div class='b'></div> 
    </div> 
    <div class='btn 3'> 
     <div class='a'></div><div class='b'></div> 
    </div> 
</div>

然後，你可以寫：

$(document).ready(function(){ 
    $('#foo .a').hide(); 

    var $btn = $('#foo > .btn'); 
    $('#foo').on('click', '.btn', function() { 
     $btn.find('.a').fadeOut(); 
     $(this).find('.a').fadeIn(); 
    }); 
});

http://jsfiddle.net/TUnB2/

我的jQuery只顯示內部的相應班級

的核心思想是利用上下文選擇以縮小選擇的元素個數：

$(this).find('.a')

來源

2013-05-06 09:50:20 dfsq

感謝您的幫助我要採取所有的建議，從每個人，看看如果我可以解決我的確切的問題 – brendosthoughts 2013-05-06 09:59:19

看來，B級你的div不被關閉。嘗試關閉這些關閉，看看你是否得到任何結果。

這與結束標記：

<div id='foo'> 
    <div class='1'> 
     <div class='a'></div><div class='b'></div> 
    </div> 
    <div class='2'> 
     <div class='a'></div><div class='b'></div> 
    </div> 
    <div class='3'> 
     <div class='a'></div><div class='b'></div> 
    </div> 
</div>

此外，你需要告訴jQuery來監聽對你的那些按鈕的點擊。

下面是一個簡單的jQuery click事件嘗試：

$("#foo .1").click(function() { 
    $("div", this).fadeIn(); 
});

這個片段會發現所有的div，都是富1內，並讓他們淡入。

讓我知道這是如何工作的，我沒有測試過它。

-Gui

來源

2013-05-06 09:53:09 Gondon

jquery選擇一個類嵌套在另一個類

回答

相關問題