jQuery的靶向嵌套#div

我的網絡設計師，不是一個程序員，在Javascript/jQuery的新手（雖然我有PHP經驗）jQuery的靶向嵌套#div

我有理解爲什麼我似乎無法對目標問題懸浮效果的正確div。

小提琴是在這裏： http://jsfiddle.net/obmerk99/F6wJs/

當我面向特定的div類（.mas），效果工作得很好但是當我指定一個第二個div類（.meta2 - 絕對定位的邊界之內第一 - .mas）效果不起作用。

（通俗的語言 - 我想要的效果，以由拇指不被大的圖像被觸發，。）

的代碼是一樣的，所以它不是一個語法錯誤 - 我相信我錯過了解jQuery的基本知識。

小心解釋??

編輯我：

理解什麼@Rick解釋之後 - 我必須說，我的問題是比較複雜一點，我剛剛發佈的簡版，因爲我認爲這是不夠的。

真正的標記有超過上述類的一個元素。

如果我刪除「這種」從代碼，它將觸發所有他們..

新小提琴這裏： http://jsfiddle.net/obmerk99/F6wJs/1/

來源

2012-03-07 Obmerk Kronen

這個問題實際上是漸弱項。在JQuery的在你的小提琴，你有喜歡的東西：

jQuery(".meta",this).fadeIn(400);

這告訴jQuery來尋找.meta內this和關鍵字this在這裏指的是由外返回選擇jQuery對象。

換句話說，如果你的外層選擇器是.mas，JQuery只在.mas內搜索.meta。如果外部選擇器是.meta2，則它只在.meta2內搜索.meta。當然，.meta在.mas之內，但它不在.meta2之內，因此您遇到的問題。

這可以通過從每個淡入淡出調用簡單地刪除第二個參數（this）來解決。所以越早行變成了：

jQuery(".meta").fadeIn(400);

更新的小提琴是在這裏：http://jsfiddle.net/qsQWU/1/

編輯：

正如其他的答案和問題的編輯指出，（在單挑感謝），我沒有想到這需要單獨完成多個元素的可能性。他們是正確的;上述解決方案不適用於該場景。他們的替代方案有效，但我也想提供第三種可能性：用jQuery(this).parent()代替this，以便上下文變得更高一級。

新的小提琴，從問題的編輯修改，是在這裏：http://jsfiddle.net/GU8Bj/

來源

2012-03-07 05:56:42 Rick

謝謝瑞克你的快速反應 - 我明白這一點。請閱讀我編輯我與新的小提琴。我試圖在我的問題上極簡主義。對於那個很抱歉。（我會除了你的答案無論如何，因爲你解釋了正確的事情 - 但我仍然想知道如何解決這個問題 - 爲了理解選擇器過程..） – 2012-03-07 06:16:24

@ObmerkNinenine不，這是我的錯，因爲沒有考慮可能用例。無論如何，我已經編寫了一個更好的解決方案，同時試圖不重複已經給出的其他解決方案。看起來你在這裏有很多選擇。 :) – Rick 2012-03-07 06:25:04

感謝您的解釋 - 它現在的作品，並會幫助我瞭解「這個」和「兒童」問題。但我必須說，@Ohgodwhy在我看來更正確（來自網頁設計師POV） - 即使並不總是可行的。 – 2012-03-07 06:30:42

他可能想用「這個」，因爲那裏將是多meta2的需要此懸停功能。

我在這裏更新了的jsfiddle - >

http://jsfiddle.net/VFwxN/7/

我重新調整了HTML來反映你試圖用你的JS做。

的問題是，

的jQuery（「元」，這一點）.fadeIn（400）;

正在尋找位於'this'內的'meta'類的元素，這是調用該操作的元素。你的情況，這是 - >

的jQuery（「MAS」）的mouseenter（函數（）{

糾正DOM結構可以讓你參考元meta2的範圍之內。如果你不能重構你的DOM，並且你不需要使用'this'來引用mouseover元素，那麼你可以使用Rick提供的解決方案。

來源

2012-03-07 06:05:51 Ohgodwhy

或者我提供的解決方案使用'this'與當前的html結構... – nnnnnn 2012-03-07 06:13:26

是的，當然可以！看起來有一千種不同的方法來煮這個雞蛋。我喜歡你的帖子，我會贊成你使用.prev（）和選擇器比較。 – Ohgodwhy 2012-03-07 06:15:17

@Ohgodwhy - 我有多個 - 請參閱我的編輯I – 2012-03-07 06:17:29

問題是你試圖選擇「 .meta「作爲」.meta2「的後代，而不是。行：

jQuery(".meta", this).fadeIn(400);

說在this的上下文中選擇「.meta」元素 - 在這種情況下，該元素是.mouseenter()函數綁定的「.meta2」元素。但「.meta」不是「.meta2」的孩子。你可以簡單地刪除this背景如下：

jQuery(".meta").fadeIn(400);

，也將努力在這個更新的提琴所示：http://jsfiddle.net/VFwxN/6/

然而，將在與類「.META」所有元素褪色。如果你想使用這個具有與該類多個元素的網頁上，你應該使用的.prev()方法來選擇立即之前取其」 .meta2" 的DIV DIV中盤旋：

jQuery(this).prev(".meta").fadeIn(400);

演示：http://jsfiddle.net/VFwxN/10/

顯然，這適用於您使用的「.meta2」和「.meta」是兄弟的html結構。

將選擇器提供給.prev()意味着它只會選擇前一個元素，如果它匹配該選擇器（否則它不會匹配任何東西 - 它不會再往後看）。

來源

2012-03-07 06:07:22 nnnnnn

謝謝，請閱讀我的編輯I – 2012-03-07 06:16:39

非常感謝。我以某種方式沒有看到你的整個解決方案（你們都同時做出了大致的迴應..）.prev（）選擇器非常適合使用。我現在無法贊成（小特權），但你確實值得投票。我會回來這樣做，當我可以.. – 2012-03-07 09:04:53

+1現在，我可以投票..再次感謝 – 2012-03-09 23:46:15

jQuery的靶向嵌套#div

回答

相關問題