jQuery的 - 遍歷DOM

這裏是我的HTML：jQuery的 - 遍歷DOM

    <li> 
         <div class="menu_inner"> 
          <a href="#"> 
           <div class="button"><img class="486" src="images/portalbutton.png" /></div> 
           <div class="prod_description">&nbsp;</div> 
          </a> 
         </div> 
        </li>

我想添加一個。點擊（）函數來.prod_description，單擊事件應該從li元素的CSS應用背景色。

使用此代碼：

$(".prod_description").mousedown(function() { 
    $('#toolbar').css('background-color', $(this).parent().css('background-color')) 
})

我不似乎能夠得到正確的$(this).parent()組合....

來源

2010-03-29 CLiown

可以是這樣做的：

$(".prod_description").mousedown(function() { 
    $('#toolbar').css('background-color', $(this).closest('li').css('background-color')) 
});

.parent()得到直接父母，你想要上升幾個級別（<a>,<div>, <li>）。 .closest('li')爬上父母並得到第一個是<li>。在這種情況下，.parent('li')也可以工作:)

來源

2010-03-29 09:56:21

在我的一些代碼快速分析暗示。家長（「禮」）比.closest（「禮」快），有人可以證實/反駁這個嗎？（當然，假設你只有一個父li）。 – 2010-03-29 10:09:46

@David - '.parents（）'具有不同的行爲，它會抓取所有父母的DOM根目錄，然後匹配選擇器。它可以更快（取決於'.closest（）'匹配的距離），然而'.parents（）'越來越慢，越是嵌套越深，所以它對於一個「淺」DOM只會更快我猜是描述它的方式。但是爲了等價，你必須進一步過濾：'.parents（'li：first'）'，如果你已經在尋找你想要的東西，那甚至不是等價的，'.parent（）'和'.parents（）'不會找到。 – 2010-03-29 10:48:26

~~在JavaScript中，您必須使用 backgroundColor而不是 background-color。~~

更新：事實證明，jQuery是能夠處理both formats，甚至DOM API本身讓你做這樣的事情：obj.style.setProperty('background-color', 'red');

來源

2010-03-29 09:57:39 jholster

他正在使用jQuery css（http://api.jquery.com/css/）函數，該函數接受一個參數，該參數是CSS屬性的實際名稱。 – 2010-03-29 10:09:46

感謝您提供的信息，從未意識到jQuery能夠翻譯它。 – jholster 2010-03-29 10:48:06

使用click事件，而不是鼠標按下。使用closest得到li元素

$("div.prod_description").click(function() { 
    $('#toolbar').css('background-color', $(this).closest('li').css('background-color')) 
});

我在單擊事件也使用標籤選擇。如果你可以給一個CSS類的背景顏色，那麼你可以使用這樣的事情

li.mybg { background-color: #a9a9a9; } 

<li class="mybg"> 
    <div class="menu_inner"> 
     <a href="#"> 
     <div class="button"> 
      <img class="486" src="images/portalbutton.png" /> 
     </div> 
     <div class="prod_description">&nbsp;</div> 
     </a> 
    </div> 
</li> 

$("div.prod_description").click(function() { 
    $('#toolbar').addClass('mybg'); 
});

來源

2010-03-29 09:57:51 rahul

我也第一次推薦使用click（），直到我在釋放鼠標按鈕（AFAIK）後意識到click（）觸發，這可能不是所需的行爲。 – jholster 2010-03-29 10:01:53

jQuery的 - 遍歷DOM

回答

相關問題