按类和数据属性过滤

Question

我想通过提供的变量找到唯一元素。

js：

var theClass  = "foo"
var theDataId = 2

html：

<div class="foo" data-id="1"></div>
<div class="foo" data-id="2"></div>
<div class="foo" data-id="3"></div>
<div class="bar" data-id="1"></div>
<div class="bar" data-id="2"></div>

我知道我可以$( "div" ).filter(theClass)但是如何进一步过滤元素以获取具有给定数据ID的元素？

Answer 1

$( "div" ).filter('.'+theClass+'[data-id="'+theDataId+'"]')

这将过滤为.foo[data-id="2"]，意味着类foo和data-id为2的元素。

Answer 2

使用$('div.' + theClass + '[data-id=' + theDataId + ']').css('color', 'red')

<强> jsFiddle example

Answer 3

使用JQuery，您可以将其包装在一个选择器中：

$('.foo[data-id="1"]');

这将选择类foo和data-id = 1

的所有元素

所以：

$('.' + theClass + '[data-id="' + theDataId + '"]');

将使用您的变量。