此上下文与筛选器上的属性选择器

Question

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

<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>

我想在我的 table 中过滤 th。我想获得与 this 上下文匹配的数据属性。我的方法不行。

How to use this context and attribute selector together

Expected out put

获取 var dataid

中指定的 data-id 的所有 th

Answer 1

您 filter() 中的逻辑不正确。您需要 return 一个布尔值，指示该元素是否符合您的要求。为此，您只需根据 dataid 变量检查其 data-id 属性，如下所示：

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>

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

i want to get index so i used attribute selector. then return the index.

在这种情况下，您可以使用 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>

此上下文与筛选器上的属性选择器

This context with attribute selector on filter

javascript

jquery

jquery-selectors