Question

当用户点击表格中的<td>时，我想要为其应用css类。我还想将css类应用于其兄弟姐妹，并将另一个css类应用于最后一个兄弟。以下代码将实现此目的......

$('td.sel').addClass('first').siblings().addClass(‘middle').last().addClass('last’);

但我想要做的是将css类应用于特定数量的兄弟姐妹 - 并非所有兄弟姐妹。

例如，如果我有下表

<table>
    <tr>
        <td data-num="3">monday</td>
        <td data-num="2">tuesday</td>
        <td data-num="3">wednesday</td>
        <td data-num="2">thursday</td>
        <td data-num="1">friday</td>
        <td data-num="3">saturday</td>
        <td data-num="1">sunday</td>
    </tr>
</table>

...如果用户点击星期三的<td>，那么......

将“.first”类添加到点击的<td>
使用data-num值，计算下一个兄弟节点以应用“.middle”类。 var numberOfDays = $(this).attr("data-num");
为最后一个“.last”兄弟

所以表格现在看起来像这样

<table>
    <tr>
        <td data-num="3">Monday</td>
        <td data-num="2">Tuesday</td>
        <td data-num="3" class="first" >Wednesday</td>
        <td data-num="2" class="middle">Thursday</td>
        <td data-num="1" class="middle">Friday</td>
        <td data-num="3" class="last" >Saturday</td>
        <td data-num="1">Sunday</td>
     </tr>
</table>

对于如何做到这一点的任何建议或帮助表示赞赏。

修改

我创建了一个JSFiddle来演示我想要做的事情。它确实有效，但代码很差。我还需要检查它是否是表中的最后一个<td>，然后应用.last类。 https://jsfiddle.net/5to9hewo/109/

Answer 1

一种可能的替代方法是将日期slice保留在索引之后的日期，而不保留索引本身，然后切除除最后一个之外的所有日期以添加middle类。这样，最后一个元素本身不会受到影响，并且通过在第一个对象上使用last，将使用最后一个实际存在的对象： Fiddle

var days = $("td.day").click(function() { //assign days and attach the click in one go
  days.removeClass('first last middle');  

  var start = days.index(this),
    end = start + parseFloat($(this).addClass('first').data("num")) ,
    next =  days.slice(++start,end); 
  next.slice(0,end-start-1).addClass('middle');
  next.last().addClass('last');
});

在jQuery中选择一些兄弟姐妹

1 个答案: