可选 - 跳过元素

Posted 2023-05-08

【中文标题】可选 - 跳过元素

【英文标题】：Selectable - skip elements

【发布时间】：2014-07-09 09:22:58

【问题描述】：

我有：

<table id="table" border="1">
    <tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td><td>a5</td></tr>
    <tr><td>b1</td><td>b2</td><td>b3</td><td>b4</td><td>b5</td></tr>
    <tr><td>c1</td><td>c2</td><td class="no">c3</td><td>c4</td><td>c5</td></tr>
    <tr><td>d1</td><td>d2</td><td>d3</td><td>d4</td><td>d5</td></tr>
    <tr><td>e1</td><td>e2</td><td>e3</td><td>e4</td><td>e5</td></tr>
    <tr><td>f1</td><td>ff2</td><td>f3</td><td>f4</td><td>f5</td></tr>
</table>

和：

$( "#table" ).selectable(
    filter: 'td:not(.no)',
    stop: function( event, ui ) 
        var selected = $(this).find('.ui-selected');

        console.log(selected);
    
);

小提琴：http://jsfiddle.net/5RxB2/

如何最好地跳过元素？我想要一个矩形或正方形。

一些例子：

1) 我选择了 a1、a2、b1、b2 - 这没关系

2) 我选择了 a1、a2、a3、b1、b2、b3 - 这没关系

3) 我选择了 a2、b2 - 这没关系

4) 我选择了：

a1、a2、a3、a4

b1、b2、b3、b4

c1, c2, a4 //a3 没有类

d1, d2, d3, d4

所以，我想收到一个矩形或正方形。这应该总是首先被选中（在本例中为 a1）并拒绝（a1，a2，b1，b2）以外的其他人 - 所以这应该从 c3 向上和侧向拒绝 TD（类号）。

这可能吗？如果是，如何？ :)

【参考方案1】：

选项 1) 在 filter 中使用选择器：

$( "#table" ).selectable(
    filter: 'td:not(.no)',
    stop: function( event, ui ) 
        var selected = $(this).find('.ui-selected');

        console.log(selected.filter(':first,:last'));
    
);

Fiddle

---

选项 2) 在find 中使用选择器：

$( "#table" ).selectable(
    filter: 'td:not(.no)',
    stop: function( event, ui ) 
        var selected = $(this).find('.ui-selected:first,.ui-selected:last');

        console.log(selected);
    
);

Fiddle