gpt4 book ai didi

javascript - jQuery 自定义选择方法仅适用于集合的第一个元素

转载 作者:太空宇宙 更新时间:2023-11-04 16:06:21 28 4
gpt4 key购买 nike

在某些时候,我决定需要一个方便的 jQuery 选择器来选择从 x 到 y 的行的 td:nth-child 。我没有编写 [:] 表达式选择器,而是选择了一个插件方法 - 假设它应该像 .find().prevAll 一样工作得很好() 确实如此。

$.fn.nthTdInRows = function (n, sRow, eRow) {
return this
.filter(function (index, el) {
return el.tagName.toLowerCase() === 'table';
})
.find('tr')
.filter(function (index) {
return index + 1 >= sRow && index + 1 <= eRow;
})
.find('td:nth-child(' + n + ')');
}

虽然此代码有效,但它仅适用于集合中的第一个表。这很可能是由于插件中缺少 .each() ,但我不知何故无法集中注意力在需要返回值时如何使用它。这可以沿着我选择的道路完成吗?

最佳答案

好的,下面是如何让它为每个表返回一个 jQuery 集合数组。让我知道这是否是您正在寻找的内容:

更新 - 返回 DOM 元素的单个 jQuery 集合,而不是集合的集合,以便您可以将 jQuery 函数从 .nthTdInRows() 调用链接起来。

$.fn.nthTdInRows = function(n, sRow, eRow) {
var arr = this.map(function() { // <-- this calls the following code for each table
// passed in, and maps each return value into an array element

var tables = $(this).filter(function(index, el) {
return $(this).is("table");
});
var tableRows = tables.find("tr");
var indexedRows = tableRows.filter(function(index) {
return index + 1 >= sRow && index + 1 <= eRow;
});
var tds = indexedRows.find('td:nth-child(' + n + ')');
return tds;
});
//debugger;
var collection = [];
arr.each(function() {
// flatten arr into simple array of DOM elements, rather than nested jQuery collections
collection = collection.concat($.map(this, function(elem, index) {
return elem;
}));
});
// wrap array of DOM elements with jQuery object so we can chain off of nthTdInRows()
return $(collection);
}

$(function() {
var tables = $("#table1, #table2, #table3");
tables.nthTdInRows(2, 1, 4).addClass("highlight");
});
.highlight {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>

<body>
<table id="table1">
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tr>
<td>data1-1</td>
<td>data2-1</td>
</tr>
<tr>
<td>data1-2</td>
<td>data2-2</td>
</tr>
<tr>
<td>data1-3</td>
<td>data2-3</td>
</tr>
<tr>
<td>data1-4</td>
<td>data2-4</td>
</tr>
</table>
<table id="table2">
<tr>
<th>header3</th>
<th>header4</th>
</tr>
<tr>
<td>data3-1</td>
<td>data4-1</td>
</tr>
<tr>
<td>data3-2</td>
<td>data4-2</td>
</tr>
<tr>
<td>data3-3</td>
<td>data4-3</td>
</tr>
<tr>
<td>data3-4</td>
<td>data4-4</td>
</tr>
</table>
<table id="table3">
<tr>
<th>header5</th>
<th>header6</th>
</tr>
<tr>
<td>data5-1</td>
<td>data6-1</td>
</tr>
<tr>
<td>data5-2</td>
<td>data6-2</td>
</tr>
<tr>
<td>data5-3</td>
<td>data6-3</td>
</tr>
<tr>
<td>data5-4</td>
<td>data6-4</td>
</tr>
</table>
</body>

</html>

关于javascript - jQuery 自定义选择方法仅适用于集合的第一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41836894/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com