Question

我已经使用nth-child定位了一个特定的td，但是想看看我是否针对那个特定的td，我将能够在nth-child之后继续在列表中继续，如何那可能吗？

这是我到目前为止所做的：

var start = "3";    
var first = $("tr:first-child").find("td:nth-child("+start+")");

\\a function that allows me to go to the next td's that are after the third td (ignoring  1 & 2)

Answer 1

您可以使用.nextAll()选择器定位下一个兄弟元素：

var nextalltds = first.nextAll();

Answer 2

您可以使用filter()函数从匹配的元素集中选择您想要的任何元素。

在以下示例中，查找从第三个开始的所有行（index = 2）并添加selected-row类

＆＃13;

$('table').find('tr').filter(function(index) {
  return index > 1;
}).addClass('selected-row');

＆＃13;

table { border-collapse:collapse }
table td { 
  border:1px solid #333;
  padding:5px 10px;
}
.selected-row td { background-color:#d8d8d8 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tbody>
    <tr><td>Table cell</td><td>Table cell</td></tr>
    <tr><td>Table cell</td><td>Table cell</td></tr>
    <tr><td>Table cell</td><td>Table cell</td></tr>
    <tr><td>Table cell</td><td>Table cell</td></tr>
    <tr><td>Table cell</td><td>Table cell</td></tr>
    <tr><td>Table cell</td><td>Table cell</td></tr>
    <tr><td>Table cell</td><td>Table cell</td></tr>
    <tr><td>Table cell</td><td>Table cell</td></tr>
    <tr><td>Table cell</td><td>Table cell</td></tr>
  </tbody>
</table>

＆＃13;

Answer 3

你试过.next（）？

var next = $("tr:first-child").find("td:nth-child("+start+")").next();

https://api.jquery.com/next/

Answer 4

您可以使用:gt选择器，如下所示：

var start = "1"; // note: works on index, so to start on the third element, use 1
var $first = $("tr:first-child td:gt(" + start + ")").addBack();
$first.addClass('foo');

.foo { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
</table>

如何定位nth-child td然后继续列表

4 个答案: