Select element by data defined with jquery
I'm trying to select element by data attribute defined with jquery (it's not visible in DOM), therefore I cannot use $('.foo:data(id)')
example: if user clicks element I add data property to it as following
$(this).data('id', '1');
now I would like to find element which has
data-id == 1
how can I select this element by data-id?
javascript jquery
asked Nov 12 at 11:46
Lukáš Václavek
4816
|
show 3 more comments
I'm trying to select element by data attribute defined with jquery (it's not visible in DOM), therefore I cannot use $('.foo:data(id)')
example: if user clicks element I add data property to it as following
$(this).data('id', '1');
now I would like to find element which has
data-id == 1
how can I select this element by data-id?
javascript jquery
asked Nov 12 at 11:46
Lukáš Václavek
4816
$('.foo').filter(function(){ $(this).data('id') == 1; })
– Satpal
Nov 12 at 11:49
@Wimanicesir The question you linked is selecting by data attribute defined in DOM, I'm dealing with data defined in jQuery.
– Lukáš Václavek
Nov 12 at 11:50
@Satpal - the linked question isn't reflecting, that the data attribute isn't present in the dom, so this isn't a duplicate for the linked quesiton
– Philipp
Nov 12 at 11:54
@Philipp, There is couple of answer which clearly suggest.filter()i.e. stackoverflow.com/a/41061135 thus I believe its a duplicate and also I didn't answered it although tried to nudge OP in correct direction via comment
– Satpal
Nov 12 at 11:56
@Satpal That's true, but the question isn't about that, as you can see in the first 9 answers
– Philipp
Nov 12 at 11:59
|
show 3 more comments
I'm trying to select element by data attribute defined with jquery (it's not visible in DOM), therefore I cannot use $('.foo:data(id)')
example: if user clicks element I add data property to it as following
$(this).data('id', '1');
now I would like to find element which has
data-id == 1
how can I select this element by data-id?
javascript jquery
asked Nov 12 at 11:46
Lukáš Václavek
4816
I'm trying to select element by data attribute defined with jquery (it's not visible in DOM), therefore I cannot use $('.foo:data(id)')
example: if user clicks element I add data property to it as following
$(this).data('id', '1');
now I would like to find element which has
data-id == 1
how can I select this element by data-id?
javascript jquery
javascript jquery
asked Nov 12 at 11:46
Lukáš Václavek
4816
asked Nov 12 at 11:46
Lukáš Václavek
4816
asked Nov 12 at 11:46
Lukáš Václavek
4816
asked Nov 12 at 11:46
Lukáš Václavek
4816
asked Nov 12 at 11:46
Lukáš Václavek
4816
4816
$('.foo').filter(function(){ $(this).data('id') == 1; })
– Satpal
Nov 12 at 11:49
@Wimanicesir The question you linked is selecting by data attribute defined in DOM, I'm dealing with data defined in jQuery.
– Lukáš Václavek
Nov 12 at 11:50
@Satpal - the linked question isn't reflecting, that the data attribute isn't present in the dom, so this isn't a duplicate for the linked quesiton
– Philipp
Nov 12 at 11:54
@Philipp, There is couple of answer which clearly suggest.filter()i.e. stackoverflow.com/a/41061135 thus I believe its a duplicate and also I didn't answered it although tried to nudge OP in correct direction via comment
– Satpal
Nov 12 at 11:56
@Satpal That's true, but the question isn't about that, as you can see in the first 9 answers
– Philipp
Nov 12 at 11:59
|
show 3 more comments
$('.foo').filter(function(){ $(this).data('id') == 1; })
– Satpal
Nov 12 at 11:49
@Wimanicesir The question you linked is selecting by data attribute defined in DOM, I'm dealing with data defined in jQuery.
– Lukáš Václavek
Nov 12 at 11:50
@Satpal - the linked question isn't reflecting, that the data attribute isn't present in the dom, so this isn't a duplicate for the linked quesiton
– Philipp
Nov 12 at 11:54
@Philipp, There is couple of answer which clearly suggest.filter()i.e. stackoverflow.com/a/41061135 thus I believe its a duplicate and also I didn't answered it although tried to nudge OP in correct direction via comment
– Satpal
Nov 12 at 11:56
@Satpal That's true, but the question isn't about that, as you can see in the first 9 answers
– Philipp
Nov 12 at 11:59
$('.foo').filter(function(){ $(this).data('id') == 1; })– Satpal
Nov 12 at 11:49
$('.foo').filter(function(){ $(this).data('id') == 1; })– Satpal
Nov 12 at 11:49
@Wimanicesir The question you linked is selecting by data attribute defined in DOM, I'm dealing with data defined in jQuery.
– Lukáš Václavek
Nov 12 at 11:50
@Wimanicesir The question you linked is selecting by data attribute defined in DOM, I'm dealing with data defined in jQuery.
– Lukáš Václavek
Nov 12 at 11:50
@Satpal - the linked question isn't reflecting, that the data attribute isn't present in the dom, so this isn't a duplicate for the linked quesiton
– Philipp
Nov 12 at 11:54
@Satpal - the linked question isn't reflecting, that the data attribute isn't present in the dom, so this isn't a duplicate for the linked quesiton
– Philipp
Nov 12 at 11:54
@Philipp, There is couple of answer which clearly suggest
.filter() i.e. stackoverflow.com/a/41061135 thus I believe its a duplicate and also I didn't answered it although tried to nudge OP in correct direction via comment– Satpal
Nov 12 at 11:56
@Philipp, There is couple of answer which clearly suggest
.filter() i.e. stackoverflow.com/a/41061135 thus I believe its a duplicate and also I didn't answered it although tried to nudge OP in correct direction via comment– Satpal
Nov 12 at 11:56
@Satpal That's true, but the question isn't about that, as you can see in the first 9 answers
– Philipp
Nov 12 at 11:59
@Satpal That's true, but the question isn't about that, as you can see in the first 9 answers
– Philipp
Nov 12 at 11:59
|
show 3 more comments
2 Answers
2
active
oldest
votes
Use filter()
$('.foo').filter(function(){
return $(this).data('id') === `1`
}).doSomething()
answered Nov 12 at 11:51
charlietfl
138k1286118
add a comment |
You could use the attribute selector [attribute=...].
In your case, this would be
$('[data-id=1]')
But keep in mind, if you change the data of an element with .data(), the change isn't reflected in the dom attribute, so you can't use this (or additionally change the dom attribute).
The other way would be to select every candidate and then filter for each element, which has a matching data value.
$('.foo').filter(function(){
return $(this).data('id') == 1;
});
answered Nov 12 at 11:49
Philipp
13.3k22040
@the downvoters - whats wrong with my suggestion?
– Philipp
Nov 12 at 11:51
Your suggestion works with DOM, but jQuery data is not manipulating DOM data, therefore your answer is invalid
– Lukáš Václavek
Nov 12 at 11:52
@LukášVáclavek because of that, I updated my answer..
– Philipp
Nov 12 at 11:53
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53261500%2fselect-element-by-data-defined-with-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Use filter()
$('.foo').filter(function(){
return $(this).data('id') === `1`
}).doSomething()
answered Nov 12 at 11:51
charlietfl
138k1286118
add a comment |
Use filter()
$('.foo').filter(function(){
return $(this).data('id') === `1`
}).doSomething()
answered Nov 12 at 11:51
charlietfl
138k1286118
add a comment |
Use filter()
$('.foo').filter(function(){
return $(this).data('id') === `1`
}).doSomething()
answered Nov 12 at 11:51
charlietfl
138k1286118
Use filter()
$('.foo').filter(function(){
return $(this).data('id') === `1`
}).doSomething()
answered Nov 12 at 11:51
charlietfl
138k1286118
answered Nov 12 at 11:51
charlietfl
138k1286118
answered Nov 12 at 11:51
charlietfl
138k1286118
answered Nov 12 at 11:51
charlietfl
138k1286118
138k1286118
add a comment |
add a comment |
You could use the attribute selector [attribute=...].
In your case, this would be
$('[data-id=1]')
But keep in mind, if you change the data of an element with .data(), the change isn't reflected in the dom attribute, so you can't use this (or additionally change the dom attribute).
The other way would be to select every candidate and then filter for each element, which has a matching data value.
$('.foo').filter(function(){
return $(this).data('id') == 1;
});
answered Nov 12 at 11:49
Philipp
13.3k22040
@the downvoters - whats wrong with my suggestion?
– Philipp
Nov 12 at 11:51
Your suggestion works with DOM, but jQuery data is not manipulating DOM data, therefore your answer is invalid
– Lukáš Václavek
Nov 12 at 11:52
@LukášVáclavek because of that, I updated my answer..
– Philipp
Nov 12 at 11:53
add a comment |
You could use the attribute selector [attribute=...].
In your case, this would be
$('[data-id=1]')
But keep in mind, if you change the data of an element with .data(), the change isn't reflected in the dom attribute, so you can't use this (or additionally change the dom attribute).
The other way would be to select every candidate and then filter for each element, which has a matching data value.
$('.foo').filter(function(){
return $(this).data('id') == 1;
});
answered Nov 12 at 11:49
Philipp
13.3k22040
@the downvoters - whats wrong with my suggestion?
– Philipp
Nov 12 at 11:51
Your suggestion works with DOM, but jQuery data is not manipulating DOM data, therefore your answer is invalid
– Lukáš Václavek
Nov 12 at 11:52
@LukášVáclavek because of that, I updated my answer..
– Philipp
Nov 12 at 11:53
add a comment |
You could use the attribute selector [attribute=...].
In your case, this would be
$('[data-id=1]')
But keep in mind, if you change the data of an element with .data(), the change isn't reflected in the dom attribute, so you can't use this (or additionally change the dom attribute).
The other way would be to select every candidate and then filter for each element, which has a matching data value.
$('.foo').filter(function(){
return $(this).data('id') == 1;
});
answered Nov 12 at 11:49
Philipp
13.3k22040
You could use the attribute selector [attribute=...].
In your case, this would be
$('[data-id=1]')
But keep in mind, if you change the data of an element with .data(), the change isn't reflected in the dom attribute, so you can't use this (or additionally change the dom attribute).
The other way would be to select every candidate and then filter for each element, which has a matching data value.
$('.foo').filter(function(){
return $(this).data('id') == 1;
});
answered Nov 12 at 11:49
Philipp
13.3k22040
answered Nov 12 at 11:49
Philipp
13.3k22040
answered Nov 12 at 11:49
Philipp
13.3k22040
answered Nov 12 at 11:49
Philipp
13.3k22040
13.3k22040
@the downvoters - whats wrong with my suggestion?
– Philipp
Nov 12 at 11:51
Your suggestion works with DOM, but jQuery data is not manipulating DOM data, therefore your answer is invalid
– Lukáš Václavek
Nov 12 at 11:52
@LukášVáclavek because of that, I updated my answer..
– Philipp
Nov 12 at 11:53
add a comment |
@the downvoters - whats wrong with my suggestion?
– Philipp
Nov 12 at 11:51
Your suggestion works with DOM, but jQuery data is not manipulating DOM data, therefore your answer is invalid
– Lukáš Václavek
Nov 12 at 11:52
@LukášVáclavek because of that, I updated my answer..
– Philipp
Nov 12 at 11:53
@the downvoters - whats wrong with my suggestion?
– Philipp
Nov 12 at 11:51
@the downvoters - whats wrong with my suggestion?
– Philipp
Nov 12 at 11:51
Your suggestion works with DOM, but jQuery data is not manipulating DOM data, therefore your answer is invalid
– Lukáš Václavek
Nov 12 at 11:52
Your suggestion works with DOM, but jQuery data is not manipulating DOM data, therefore your answer is invalid
– Lukáš Václavek
Nov 12 at 11:52
@LukášVáclavek because of that, I updated my answer..
– Philipp
Nov 12 at 11:53
@LukášVáclavek because of that, I updated my answer..
– Philipp
Nov 12 at 11:53
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53261500%2fselect-element-by-data-defined-with-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
$('.foo').filter(function(){ $(this).data('id') == 1; })– Satpal
Nov 12 at 11:49
@Wimanicesir The question you linked is selecting by data attribute defined in DOM, I'm dealing with data defined in jQuery.
– Lukáš Václavek
Nov 12 at 11:50
@Satpal - the linked question isn't reflecting, that the data attribute isn't present in the dom, so this isn't a duplicate for the linked quesiton
– Philipp
Nov 12 at 11:54
@Philipp, There is couple of answer which clearly suggest
.filter()i.e. stackoverflow.com/a/41061135 thus I believe its a duplicate and also I didn't answered it although tried to nudge OP in correct direction via comment– Satpal
Nov 12 at 11:56
@Satpal That's true, but the question isn't about that, as you can see in the first 9 answers
– Philipp
Nov 12 at 11:59