如何使用Jquery (或CSS5)选择直到"this“

Question

假设我有一个这样的表：

<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实现吗？

Answer 1

尝试以下操作：

$('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演示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。

我希望这能帮到你!