javascript - jQuery Selecting DOM Element by data-attribute with multiple Identifiers in it - Stack Overflow

admin管理员组

文章数量:1023081

Note: this isn't a basic question on Querying by data-attributes

The problem I'm having is that I have certain elements like so:

<div data-step="1, 4">

I have figured out how to step through each [data-step] and extract the 1, 4 and create events for them, etc.

Let's say I'm trying to Query and grab this exact data-step but all I'm given is: 4

$('[data-step="4"]') 
// this won't work of course

$('[data-step="1, 4"]')
// obviously this will work, but at this point I'm only given the index
// which will only be ONE of these numbers

Basically given (for examples sake, 4) How can I easily Query the selector to go out and grab [data-step="1, 4"]?

All I'm able to e up with is a loop, that goes through each data-step, strips out everything and sees if there is a match. Is there an easier way potentially?

Note: this isn't a basic question on Querying by data-attributes

The problem I'm having is that I have certain elements like so:

<div data-step="1, 4">

I have figured out how to step through each [data-step] and extract the 1, 4 and create events for them, etc.

Let's say I'm trying to Query and grab this exact data-step but all I'm given is: 4

$('[data-step="4"]') 
// this won't work of course

$('[data-step="1, 4"]')
// obviously this will work, but at this point I'm only given the index
// which will only be ONE of these numbers

Basically given (for examples sake, 4) How can I easily Query the selector to go out and grab [data-step="1, 4"]?

All I'm able to e up with is a loop, that goes through each data-step, strips out everything and sees if there is a match. Is there an easier way potentially?

• javascript
• jquery
• html

Share Improve this question Follow asked Jan 3, 2013 at 22:36 Mark Pieszak - Trilon.ioMark Pieszak - Trilon.io 67.4k1515 gold badges8383 silver badges9696 bronze badges 2

• 4 If you can change your data-step attribute to be delimited by spaces, you can use $("[data-step~='4']"). – ajshort Commented Jan 3, 2013 at 22:41
• @ajshort Seems like the simplest solution here! Luckily I'm able to change that, much easier to handle this way. Cheers – Mark Pieszak - Trilon.io Commented Jan 3, 2013 at 22:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

~= will find element with an attribute which has a value containing a given word, delimited by spaces. Works in your case also.

$('[data-step~="4"]')

*= will find element with an attribute which has a value containing the given substring.

$('[data-step*="4"]')

You may also use filter solution:

var search = 4;
$("[data-step]").filter(function() {
    return $.inArray("" + search, $(this).data("step").split(/,\s*/)) !== -1;
});

You need to use * before = it will return all data-step wich is contain substring 'value' $('[data-step*="value"]')

Note: this isn't a basic question on Querying by data-attributes

The problem I'm having is that I have certain elements like so:

<div data-step="1, 4">

I have figured out how to step through each [data-step] and extract the 1, 4 and create events for them, etc.

Let's say I'm trying to Query and grab this exact data-step but all I'm given is: 4

$('[data-step="4"]') 
// this won't work of course

$('[data-step="1, 4"]')
// obviously this will work, but at this point I'm only given the index
// which will only be ONE of these numbers

Basically given (for examples sake, 4) How can I easily Query the selector to go out and grab [data-step="1, 4"]?

All I'm able to e up with is a loop, that goes through each data-step, strips out everything and sees if there is a match. Is there an easier way potentially?

Note: this isn't a basic question on Querying by data-attributes

The problem I'm having is that I have certain elements like so:

<div data-step="1, 4">

I have figured out how to step through each [data-step] and extract the 1, 4 and create events for them, etc.

Let's say I'm trying to Query and grab this exact data-step but all I'm given is: 4

$('[data-step="4"]') 
// this won't work of course

$('[data-step="1, 4"]')
// obviously this will work, but at this point I'm only given the index
// which will only be ONE of these numbers

Basically given (for examples sake, 4) How can I easily Query the selector to go out and grab [data-step="1, 4"]?

All I'm able to e up with is a loop, that goes through each data-step, strips out everything and sees if there is a match. Is there an easier way potentially?

• javascript
• jquery
• html

Share Improve this question Follow asked Jan 3, 2013 at 22:36 Mark Pieszak - Trilon.ioMark Pieszak - Trilon.io 67.4k1515 gold badges8383 silver badges9696 bronze badges 2

• 4 If you can change your data-step attribute to be delimited by spaces, you can use $("[data-step~='4']"). – ajshort Commented Jan 3, 2013 at 22:41
• @ajshort Seems like the simplest solution here! Luckily I'm able to change that, much easier to handle this way. Cheers – Mark Pieszak - Trilon.io Commented Jan 3, 2013 at 22:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

~= will find element with an attribute which has a value containing a given word, delimited by spaces. Works in your case also.

$('[data-step~="4"]')

*= will find element with an attribute which has a value containing the given substring.

$('[data-step*="4"]')

You may also use filter solution:

var search = 4;
$("[data-step]").filter(function() {
    return $.inArray("" + search, $(this).data("step").split(/,\s*/)) !== -1;
});

You need to use * before = it will return all data-step wich is contain substring 'value' $('[data-step*="value"]')

本文标签： javascriptjQuery Selecting DOM Element by dataattribute with multiple Identifiers in itStack Overflow