如何選擇到「本」與jQuery（或CSS5）

比方說，我有一個這樣的表：如何選擇到「本」與jQuery（或CSS5）

<table> 
    <tbody id="example"> 
     <tr> 
      <td>cell-1</td> 
      <td>cell-2</td> 
      <td>cell-3</td> 
      <td>cell-4</td> 
     </tr> 
    </tbody> 
</table>

現在，例如，如果鼠標在電池-X，然後我想選擇所有細胞從1到X

像這樣：

$('tr > td','#example').mouseover(function(e) { 
    //select cells begining from first to $(this) 
});

，或者這是可能的CSS5？

來源

2014-04-17 Roni Tovi

偉大的問題，但是你錯過了最大的細節..你想用這個選擇代碼來完成什麼？（只是jQuery，更改CSS等） –

我不明白你的問題？我想「選擇直到這個」無論是在JQuery或CSS中 –

告訴我：什麼是CSS5？ –

嘗試以下操作：

$('tr > td','#example').mouseover(function(e) { 
    // Remove .selected from All <td /> 
    $('tr > td','#example').removeClass('selected'); 

    // Look Through All <td /> Until Reaching Current 
    var el = $(this).get(0); 
    $('tr > td','#example').each(function(){ 
     $(this).addClass('selected'); 

     if ($(this).get(0) == el){ 
      return false; 
     } 
    }); 
});

的.selected類是僅用於說明目的。你可以用你需要的任何功能來替換它。

JSFiddle Demo Here。

編輯

下也將工作，如果你正在尋找做一些簡單的與元素或作爲一個jQuery鏈的一部分。

$('tr > td','#example').hover(
    function(){ 
     var elIndex = $('tr > td','#example').index(this); 
      elIndex += 1; // To Include Current Element 
     $('tr > td','#example').slice(0, elIndex).addClass('selected'); 
    }, 
    function(){ 
     $('tr > td','#example').removeClass('selected'); 
    } 
);

編輯演示Here。

我希望這有助於！

來源

2014-04-17 20:52:04 dSquared

如何選擇到「本」與jQuery（或CSS5）

回答

相關問題