Select a div based on it's child's selector?What is the best way to add options to a select from as a JS object with jQuery?How to get the children of the $(this) selector?How can I know which radio button is selected via jQuery?Creating a div element in jQueryHow can I select an element with multiple classes in jQuery?Get selected text from a drop-down list (select box) using jQueryjquery data selectorjQuery selector for an element that directly contains text?Set select option 'selected', by valuejQuery search for child element, but not with certain div
What is the function of const specifier in enum types?
Can I deep fry food in butter instead of vegetable oil?
Are the Gray and Death Slaad's Bite and Claw attacks magical?
What's the difference between the Find Steed and Find Greater Steed spells?
Family-wise Type I error OLS regression
What verb goes with "coup"?
What is the meaning of "it" in "as luck would have it"?
What could a Medieval society do with excess animal blood?
Enterprise Layers and Naming Conventions
When does it become illegal to exchange bitcoin for cash?
Non-inverting amplifier ; Single supply ; Bipolar input
My players like to search everything. What do they find?
How do I tell my girlfriend she's been buying me books by the wrong author for the last nine months?
ShellExView vs ShellMenuView
What's the idiomatic (or best) way to trim surrounding whitespace from a string?
2019 2-letters 33-length list
Did the Shuttle payload bay have illumination?
Old story where computer expert digitally animates The Lord of the Rings
How does entropy depend on location and scale?
Bootstrap paradox with a time machine in iron
Are the plates of a battery really charged?
Turing Machines: What is the difference between recognizing, deciding, total, accepting, rejecting?
What caused the flashes in the video footage of Chernobyl?
Available snapshots for main net?
Select a div based on it's child's selector?
What is the best way to add options to a select from as a JS object with jQuery?How to get the children of the $(this) selector?How can I know which radio button is selected via jQuery?Creating a div element in jQueryHow can I select an element with multiple classes in jQuery?Get selected text from a drop-down list (select box) using jQueryjquery data selectorjQuery selector for an element that directly contains text?Set select option 'selected', by valuejQuery search for child element, but not with certain div
first time long time.
Trying to select certain elements in a feed based on this selector that some of their children contain. The child div (buried way down in divs within divs) in question looks like this:
<div data-test-id="example-test-id">
...
</div>
Their parent divs look like this:
<div data-grid-item="true">
...
</div>
I want to select any div whose data-grid-item="true", who also contains a child div whose data-test-id="example-test-id" .
Resulting in code that looks like this:
$("div[data-grid-item='true']:has(data-test-id="example-test-id"])").css( "background-color", "red" )
In this case I'm just trying to give the parent div a red background so I can verify that I've selected the correct elements, which doesn't seem to be working. As I'm sure you can tell, I'm a novice at jquery so the above code is what I've been able to glean from lots of googling. Any help would be much appreciated.
Thanks!
jquery
asked Mar 25 at 17:34
krudsmakrudsma
61 bronze badge
add a comment |
first time long time.
Trying to select certain elements in a feed based on this selector that some of their children contain. The child div (buried way down in divs within divs) in question looks like this:
<div data-test-id="example-test-id">
...
</div>
Their parent divs look like this:
<div data-grid-item="true">
...
</div>
I want to select any div whose data-grid-item="true", who also contains a child div whose data-test-id="example-test-id" .
Resulting in code that looks like this:
$("div[data-grid-item='true']:has(data-test-id="example-test-id"])").css( "background-color", "red" )
In this case I'm just trying to give the parent div a red background so I can verify that I've selected the correct elements, which doesn't seem to be working. As I'm sure you can tell, I'm a novice at jquery so the above code is what I've been able to glean from lots of googling. Any help would be much appreciated.
Thanks!
jquery
asked Mar 25 at 17:34
krudsmakrudsma
61 bronze badge
your jquery looks right, except for the quotes. You have double quotes around the selector and inside it. Put single quotes aroundexample-test-id.
– Yuriy Faktorovich
Mar 25 at 17:37
add a comment |
first time long time.
Trying to select certain elements in a feed based on this selector that some of their children contain. The child div (buried way down in divs within divs) in question looks like this:
<div data-test-id="example-test-id">
...
</div>
Their parent divs look like this:
<div data-grid-item="true">
...
</div>
I want to select any div whose data-grid-item="true", who also contains a child div whose data-test-id="example-test-id" .
Resulting in code that looks like this:
$("div[data-grid-item='true']:has(data-test-id="example-test-id"])").css( "background-color", "red" )
In this case I'm just trying to give the parent div a red background so I can verify that I've selected the correct elements, which doesn't seem to be working. As I'm sure you can tell, I'm a novice at jquery so the above code is what I've been able to glean from lots of googling. Any help would be much appreciated.
Thanks!
jquery
asked Mar 25 at 17:34
krudsmakrudsma
61 bronze badge
first time long time.
Trying to select certain elements in a feed based on this selector that some of their children contain. The child div (buried way down in divs within divs) in question looks like this:
<div data-test-id="example-test-id">
...
</div>
Their parent divs look like this:
<div data-grid-item="true">
...
</div>
I want to select any div whose data-grid-item="true", who also contains a child div whose data-test-id="example-test-id" .
Resulting in code that looks like this:
$("div[data-grid-item='true']:has(data-test-id="example-test-id"])").css( "background-color", "red" )
In this case I'm just trying to give the parent div a red background so I can verify that I've selected the correct elements, which doesn't seem to be working. As I'm sure you can tell, I'm a novice at jquery so the above code is what I've been able to glean from lots of googling. Any help would be much appreciated.
Thanks!
jquery
jquery
asked Mar 25 at 17:34
krudsmakrudsma
61 bronze badge
asked Mar 25 at 17:34
krudsmakrudsma
61 bronze badge
asked Mar 25 at 17:34
krudsmakrudsma
61 bronze badge
asked Mar 25 at 17:34
krudsmakrudsma
61 bronze badge
asked Mar 25 at 17:34
krudsmakrudsma
61 bronze badge
61 bronze badge
your jquery looks right, except for the quotes. You have double quotes around the selector and inside it. Put single quotes aroundexample-test-id.
– Yuriy Faktorovich
Mar 25 at 17:37
add a comment |
your jquery looks right, except for the quotes. You have double quotes around the selector and inside it. Put single quotes aroundexample-test-id.
– Yuriy Faktorovich
Mar 25 at 17:37
your jquery looks right, except for the quotes. You have double quotes around the selector and inside it. Put single quotes around
example-test-id.– Yuriy Faktorovich
Mar 25 at 17:37
your jquery looks right, except for the quotes. You have double quotes around the selector and inside it. Put single quotes around
example-test-id.– Yuriy Faktorovich
Mar 25 at 17:37
add a comment |
1 Answer
1
active
oldest
votes
It is just a typo, you were so close :
$("div[data-grid-item='true']:has(data-test-id="example-test-id"])")
__________________________________^ Missing '['
Note: The double quotes are also part of the problem you need to replace then by single ones like :
$("div[data-grid-item='true']:has([data-test-id='example-test-id'])")
________________________________________________^_______________^
$("div[data-grid-item='true']:has([data-test-id='example-test-id'])").css("background-color", "red");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-grid-item="true">
<div data-test-id="example-test-id">TEST 1</div>
</div>
<div data-grid-item="true">
<div>TEST 2</div>
</div>
<div data-grid-item="true">
<div data-test-id="example-test-id">TEST 3</div>
</div>answered Mar 25 at 17:38
Zakaria AcharkiZakaria Acharki
58.1k13 gold badges44 silver badges73 bronze badges
If it's just a typo, shouldn't this be voted close due to typo?
– Huangism
Mar 25 at 17:40
Go ahead and flag it, that doesn't mean not showing the right answer.
– Zakaria Acharki
Mar 25 at 17:41
Oh I was more on the topic of a typo question should be closed and not answered, yes your answer is most likely correct
– Huangism
Mar 25 at 17:42
DARN IT! Thanks for the help, it's working now.
– krudsma
Mar 25 at 17:46
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%2f55343542%2fselect-a-div-based-on-its-childs-selector%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
It is just a typo, you were so close :
$("div[data-grid-item='true']:has(data-test-id="example-test-id"])")
__________________________________^ Missing '['
Note: The double quotes are also part of the problem you need to replace then by single ones like :
$("div[data-grid-item='true']:has([data-test-id='example-test-id'])")
________________________________________________^_______________^
$("div[data-grid-item='true']:has([data-test-id='example-test-id'])").css("background-color", "red");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-grid-item="true">
<div data-test-id="example-test-id">TEST 1</div>
</div>
<div data-grid-item="true">
<div>TEST 2</div>
</div>
<div data-grid-item="true">
<div data-test-id="example-test-id">TEST 3</div>
</div>answered Mar 25 at 17:38
Zakaria AcharkiZakaria Acharki
58.1k13 gold badges44 silver badges73 bronze badges
If it's just a typo, shouldn't this be voted close due to typo?
– Huangism
Mar 25 at 17:40
Go ahead and flag it, that doesn't mean not showing the right answer.
– Zakaria Acharki
Mar 25 at 17:41
Oh I was more on the topic of a typo question should be closed and not answered, yes your answer is most likely correct
– Huangism
Mar 25 at 17:42
DARN IT! Thanks for the help, it's working now.
– krudsma
Mar 25 at 17:46
add a comment |
It is just a typo, you were so close :
$("div[data-grid-item='true']:has(data-test-id="example-test-id"])")
__________________________________^ Missing '['
Note: The double quotes are also part of the problem you need to replace then by single ones like :
$("div[data-grid-item='true']:has([data-test-id='example-test-id'])")
________________________________________________^_______________^
$("div[data-grid-item='true']:has([data-test-id='example-test-id'])").css("background-color", "red");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-grid-item="true">
<div data-test-id="example-test-id">TEST 1</div>
</div>
<div data-grid-item="true">
<div>TEST 2</div>
</div>
<div data-grid-item="true">
<div data-test-id="example-test-id">TEST 3</div>
</div>answered Mar 25 at 17:38
Zakaria AcharkiZakaria Acharki
58.1k13 gold badges44 silver badges73 bronze badges
If it's just a typo, shouldn't this be voted close due to typo?
– Huangism
Mar 25 at 17:40
Go ahead and flag it, that doesn't mean not showing the right answer.
– Zakaria Acharki
Mar 25 at 17:41
Oh I was more on the topic of a typo question should be closed and not answered, yes your answer is most likely correct
– Huangism
Mar 25 at 17:42
DARN IT! Thanks for the help, it's working now.
– krudsma
Mar 25 at 17:46
add a comment |
It is just a typo, you were so close :
$("div[data-grid-item='true']:has(data-test-id="example-test-id"])")
__________________________________^ Missing '['
Note: The double quotes are also part of the problem you need to replace then by single ones like :
$("div[data-grid-item='true']:has([data-test-id='example-test-id'])")
________________________________________________^_______________^
$("div[data-grid-item='true']:has([data-test-id='example-test-id'])").css("background-color", "red");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-grid-item="true">
<div data-test-id="example-test-id">TEST 1</div>
</div>
<div data-grid-item="true">
<div>TEST 2</div>
</div>
<div data-grid-item="true">
<div data-test-id="example-test-id">TEST 3</div>
</div>answered Mar 25 at 17:38
Zakaria AcharkiZakaria Acharki
58.1k13 gold badges44 silver badges73 bronze badges
It is just a typo, you were so close :
$("div[data-grid-item='true']:has(data-test-id="example-test-id"])")
__________________________________^ Missing '['
Note: The double quotes are also part of the problem you need to replace then by single ones like :
$("div[data-grid-item='true']:has([data-test-id='example-test-id'])")
________________________________________________^_______________^
$("div[data-grid-item='true']:has([data-test-id='example-test-id'])").css("background-color", "red");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-grid-item="true">
<div data-test-id="example-test-id">TEST 1</div>
</div>
<div data-grid-item="true">
<div>TEST 2</div>
</div>
<div data-grid-item="true">
<div data-test-id="example-test-id">TEST 3</div>
</div>$("div[data-grid-item='true']:has([data-test-id='example-test-id'])").css("background-color", "red");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-grid-item="true">
<div data-test-id="example-test-id">TEST 1</div>
</div>
<div data-grid-item="true">
<div>TEST 2</div>
</div>
<div data-grid-item="true">
<div data-test-id="example-test-id">TEST 3</div>
</div>$("div[data-grid-item='true']:has([data-test-id='example-test-id'])").css("background-color", "red");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-grid-item="true">
<div data-test-id="example-test-id">TEST 1</div>
</div>
<div data-grid-item="true">
<div>TEST 2</div>
</div>
<div data-grid-item="true">
<div data-test-id="example-test-id">TEST 3</div>
</div>answered Mar 25 at 17:38
Zakaria AcharkiZakaria Acharki
58.1k13 gold badges44 silver badges73 bronze badges
edited Mar 25 at 17:40
answered Mar 25 at 17:38
Zakaria AcharkiZakaria Acharki
58.1k13 gold badges44 silver badges73 bronze badges
answered Mar 25 at 17:38
Zakaria AcharkiZakaria Acharki
58.1k13 gold badges44 silver badges73 bronze badges
answered Mar 25 at 17:38
Zakaria AcharkiZakaria Acharki
58.1k13 gold badges44 silver badges73 bronze badges
58.1k13 gold badges44 silver badges73 bronze badges
If it's just a typo, shouldn't this be voted close due to typo?
– Huangism
Mar 25 at 17:40
Go ahead and flag it, that doesn't mean not showing the right answer.
– Zakaria Acharki
Mar 25 at 17:41
Oh I was more on the topic of a typo question should be closed and not answered, yes your answer is most likely correct
– Huangism
Mar 25 at 17:42
DARN IT! Thanks for the help, it's working now.
– krudsma
Mar 25 at 17:46
add a comment |
If it's just a typo, shouldn't this be voted close due to typo?
– Huangism
Mar 25 at 17:40
Go ahead and flag it, that doesn't mean not showing the right answer.
– Zakaria Acharki
Mar 25 at 17:41
Oh I was more on the topic of a typo question should be closed and not answered, yes your answer is most likely correct
– Huangism
Mar 25 at 17:42
DARN IT! Thanks for the help, it's working now.
– krudsma
Mar 25 at 17:46
If it's just a typo, shouldn't this be voted close due to typo?
– Huangism
Mar 25 at 17:40
If it's just a typo, shouldn't this be voted close due to typo?
– Huangism
Mar 25 at 17:40
Go ahead and flag it, that doesn't mean not showing the right answer.
– Zakaria Acharki
Mar 25 at 17:41
Go ahead and flag it, that doesn't mean not showing the right answer.
– Zakaria Acharki
Mar 25 at 17:41
Oh I was more on the topic of a typo question should be closed and not answered, yes your answer is most likely correct
– Huangism
Mar 25 at 17:42
Oh I was more on the topic of a typo question should be closed and not answered, yes your answer is most likely correct
– Huangism
Mar 25 at 17:42
DARN IT! Thanks for the help, it's working now.
– krudsma
Mar 25 at 17:46
DARN IT! Thanks for the help, it's working now.
– krudsma
Mar 25 at 17:46
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
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.
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%2f55343542%2fselect-a-div-based-on-its-childs-selector%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
your jquery looks right, except for the quotes. You have double quotes around the selector and inside it. Put single quotes around
example-test-id.– Yuriy Faktorovich
Mar 25 at 17:37