Question

＆＃13;

var dataid = "2";
console.log(dataid)
var index = $("table thead th").filter(function() {
  return $(this,"[data-id=" + dataid + "]").index();
}).get();
console.log(index)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th data-id="1">1
    </th>
    <th data-id="1">1
    </th>
    <th data-id="2">2
    </th>
    <th data-id="2">2
    </th>
    <th data-id="3">3
    </th>
    <th data-id="3">3
    </th>
  </thead>

</table>

＆＃13;

我想过滤表格中的 th 。我希望将匹配的数据属性与 this 上下文相匹配。我的方式不起作用。

如何一起使用此上下文和属性选择器

Expected out put

使用var th

中指定的data-id获取所有dataid

Answer 1

filter()中的逻辑不正确。您需要返回一个布尔值，指示元素是否符合您的要求。要执行此操作，您只需针对data-id变量检查其dataid属性，如下所示：

var dataid = "2";

var index = $("table thead th").filter(function() {
  return $(this).data('id') == dataid;
}).addClass('foo').get();

console.log(index)

.foo { color: #c00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th data-id="1">1</th>
    <th data-id="1">1</th>
    <th data-id="2">2</th>
    <th data-id="2">2</th>
    <th data-id="3">3</th>
    <th data-id="3">3</th>
  </thead>
</table>

请注意，我还在元素中添加了一个类，以向您展示如何使用它们来修改UI。

我想获得索引，所以我使用了属性选择器。然后返回索引。

在这种情况下，您可以使用map()而不是filter()来构建所需元素的索引数组，如下所示：

var dataid = "2";

var indexes = $("table thead th").map(function(index) {
  if ($(this).data('id') == dataid)
    return index;
}).get();

console.log(indexes)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th data-id="1">1</th>
    <th data-id="1">1</th>
    <th data-id="2">2</th>
    <th data-id="2">2</th>
    <th data-id="3">3</th>
    <th data-id="3">3</th>
  </thead>
</table>

此上下文与过滤器上的属性选择器

1 个答案: