Этот контекст с селекторов атрибутов на фильтре

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>

Я хочу, чтобы фильтровать th в моей таблице. Я хочу получить соответствующий атрибут данных с this контекст. Мой путь не работает.

Как использовать этот контекст и атрибут селектору вместе

Expected out put

Получить все 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>

Примечание их внести изменения в пользовательский интерфейс.

Я хочу получить индекс, поэтому я использовал селектор атрибутов. затем верните индекс.

В этом случае вы можете использовать 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>