如何將css類添加到父元素？

我試圖做一些比較簡單，但我可能失去了一些東西......如何將css類添加到父元素？

我有這樣的代碼：

var $highlights = $j("div.ab-highlights ul li a"); 
$highlights.hover(
    function() { 
     $j(this).children().addClass('active'); 

     for (i=0; i < $highlights.length; i++) 
     { 
      if ($highlights[i] != this) 
      { 
       console.log(i); 
       ($highlights.parent()[i]).addClass('lowOpacity'); 
      } 
     } 
    }, 
    function() { 
     $j(this).children().removeClass('active'); 
    } 
);

的底線是，我試圖附加類（「lowOpacity」）除了我滾動的元素之外的所有元素。事情是不行的。不工作的線路是

($highlights.parent()[i]).addClass('lowOpacity');

我在想什麼？

來源

2011-07-09 Alon

多個元素的錯誤消息應該給一些提示什麼是錯的。請閱讀:) – 2011-07-09 17:21:01

您不需要爲所有父母設置相同的班級。如果你正確地指定了你的CSS，你應該能夠把這個類放到你想要生效的頂層父項目上，並且讓所有的子項都被這個頂級的類自動生效。這只是使用正確的CSS的問題，但它會讓你的JS變得更簡單。 – jfriend00

元素只能有一個父元素。

$j($highlights[i]).parent().addClass('lowOpacity');

此代碼會爲每個高亮元素的父級添加一個類。

你也可以重構你的代碼是這樣的：

var $highlights = $j("div.ab-highlights ul li a"); 
$highlights.hover(
    function() { 
     $j(this).children().addClass('active'); 
     $j($highlights).not(this).parent().addClass("lowOpacity"); //Thanks Felix +1 
    }, 
    function() { 
     $j(this).children().removeClass('active'); 
    } 
);

來源

2011-07-09 17:14:49

我認爲它應該是'$（$ highlights [i]）。parent（）'，但是。他有一組元素，並在給定索引「i」處獲取元素的父元素。 –

他也有jQuery映射到$ j so $ J（$ highlights [i]）。parent（） –

啊，沒錯。 –

看來你要的類添加到$highlights元素的所有家長，預計目前徘徊之一：

$highlights.not(this).parent().addClass('lowOpacity');

這代碼行代替整個for循環。

參考：not

我想你也必須再次刪除元素lowOpacity。你可以降低代碼的這樣：

var $highlights = $j("div.ab-highlights ul li a"); 
$highlights.hover(function() { 
    $j(this).children().toggleClass('active'); 
    $highlights.not(this).parent().toggleClass('lowOpacity'); 
});

解釋爲什麼你的代碼不起作用：

$highlights.parent()[i]

返回一個DOM元素，但addClass是一個jQuery方法。因此，你將不得不再次傳遞給jQuery的或使用eq^[docs]代替：

$highlights.parent().eq(i).addClass('lowOpacity');

這是什麼東西做的是讓所有元素的父元素$highlights，然後選擇i日之一。

另一種方法是首先選擇$highlights中的i th元素，然後選擇其父元素。

但是正如你在上面看到的那樣，它更容易，你根本不必循環。

來源

2011-07-09 17:17:11

這種選擇直接父

$('your_selector').parent().doSomeThing()

選擇在父母

$('your_selector').parents('selector').doSomeThing()

來源

2011-07-09 17:32:41

如何將css類添加到父元素？

回答

相關問題