How to access the css * selecter in jquery?
-2
what is the JavaScript / jquery equivalent of the following css operation.
.outer-content-warrap > * {
background-color: yellow;
}
I tried using this, but it only works for the first child div, and not on other child div's
$(".outer-content-warrap").children().css('background-color','yellow');<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer-content-warrap">
<div>div1</div>
<div>div2</div>
<div>
div3
<div>div3.1</div>
<div>
div3.2
<div>div3.2.1</div>
</div>
</div>
</div>result of css:
result of jquery
javascript jquery css
edited Dec 28 '18 at 12:13
Mordecai
804112
asked Dec 28 '18 at 11:01
Ibrahim Ali AsgharIbrahim Ali Asghar
14
|
show 8 more comments
-2
what is the JavaScript / jquery equivalent of the following css operation.
.outer-content-warrap > * {
background-color: yellow;
}
I tried using this, but it only works for the first child div, and not on other child div's
$(".outer-content-warrap").children().css('background-color','yellow');<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer-content-warrap">
<div>div1</div>
<div>div2</div>
<div>
div3
<div>div3.1</div>
<div>
div3.2
<div>div3.2.1</div>
</div>
</div>
</div>result of css:
result of jquery
javascript jquery css
edited Dec 28 '18 at 12:13
Mordecai
804112
asked Dec 28 '18 at 11:01
Ibrahim Ali AsgharIbrahim Ali Asghar
14
1
$('.outer-content-warrap > *')try that
– Dale
Dec 28 '18 at 11:04
2
Your code should work fine. Please, edit your question and provide a Minimal, Complete, and Verifiable example.
– Xufox
Dec 28 '18 at 11:04
1
Possible duplicate of How to select ALL children (in any level) from a parent in jQuery?
– tomerpacific
Dec 28 '18 at 11:04
2
Your code should be working. Please update your question with a Minimal, Complete, and Verifiable example demonstrating the problem, ideally a runnable one using Stack Snippets (the[<>]toolbar button; here's how to do one).
– T.J. Crowder
Dec 28 '18 at 11:05
1
Here is an example showing that the selector works in the exact same way in both CSS and jQuery... jsfiddle.net/a0L21s6c Unless you can post code that demonstrates your problem I suggest that your issue lies elsewhere. You've probably got some more CSS affecting the page elsewhere.
– Archer
Dec 28 '18 at 11:31
|
show 8 more comments
-2
-2
-2
what is the JavaScript / jquery equivalent of the following css operation.
.outer-content-warrap > * {
background-color: yellow;
}
I tried using this, but it only works for the first child div, and not on other child div's
$(".outer-content-warrap").children().css('background-color','yellow');<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer-content-warrap">
<div>div1</div>
<div>div2</div>
<div>
div3
<div>div3.1</div>
<div>
div3.2
<div>div3.2.1</div>
</div>
</div>
</div>result of css:
result of jquery
javascript jquery css
edited Dec 28 '18 at 12:13
Mordecai
804112
asked Dec 28 '18 at 11:01
Ibrahim Ali AsgharIbrahim Ali Asghar
14
what is the JavaScript / jquery equivalent of the following css operation.
.outer-content-warrap > * {
background-color: yellow;
}
I tried using this, but it only works for the first child div, and not on other child div's
$(".outer-content-warrap").children().css('background-color','yellow');<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer-content-warrap">
<div>div1</div>
<div>div2</div>
<div>
div3
<div>div3.1</div>
<div>
div3.2
<div>div3.2.1</div>
</div>
</div>
</div>result of css:
result of jquery
$(".outer-content-warrap").children().css('background-color','yellow');<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer-content-warrap">
<div>div1</div>
<div>div2</div>
<div>
div3
<div>div3.1</div>
<div>
div3.2
<div>div3.2.1</div>
</div>
</div>
</div>$(".outer-content-warrap").children().css('background-color','yellow');<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer-content-warrap">
<div>div1</div>
<div>div2</div>
<div>
div3
<div>div3.1</div>
<div>
div3.2
<div>div3.2.1</div>
</div>
</div>
</div>javascript jquery css
javascript jquery css
edited Dec 28 '18 at 12:13
Mordecai
804112
asked Dec 28 '18 at 11:01
Ibrahim Ali AsgharIbrahim Ali Asghar
14
edited Dec 28 '18 at 12:13
Mordecai
804112
asked Dec 28 '18 at 11:01
Ibrahim Ali AsgharIbrahim Ali Asghar
14
edited Dec 28 '18 at 12:13
Mordecai
804112
edited Dec 28 '18 at 12:13
Mordecai
804112
edited Dec 28 '18 at 12:13
Mordecai
804112
804112
asked Dec 28 '18 at 11:01
Ibrahim Ali AsgharIbrahim Ali Asghar
14
asked Dec 28 '18 at 11:01
Ibrahim Ali AsgharIbrahim Ali Asghar
14
asked Dec 28 '18 at 11:01
Ibrahim Ali AsgharIbrahim Ali Asghar
14
14
1
$('.outer-content-warrap > *')try that
– Dale
Dec 28 '18 at 11:04
2
Your code should work fine. Please, edit your question and provide a Minimal, Complete, and Verifiable example.
– Xufox
Dec 28 '18 at 11:04
1
Possible duplicate of How to select ALL children (in any level) from a parent in jQuery?
– tomerpacific
Dec 28 '18 at 11:04
2
Your code should be working. Please update your question with a Minimal, Complete, and Verifiable example demonstrating the problem, ideally a runnable one using Stack Snippets (the[<>]toolbar button; here's how to do one).
– T.J. Crowder
Dec 28 '18 at 11:05
1
Here is an example showing that the selector works in the exact same way in both CSS and jQuery... jsfiddle.net/a0L21s6c Unless you can post code that demonstrates your problem I suggest that your issue lies elsewhere. You've probably got some more CSS affecting the page elsewhere.
– Archer
Dec 28 '18 at 11:31
|
show 8 more comments
1
$('.outer-content-warrap > *')try that
– Dale
Dec 28 '18 at 11:04
2
Your code should work fine. Please, edit your question and provide a Minimal, Complete, and Verifiable example.
– Xufox
Dec 28 '18 at 11:04
1
Possible duplicate of How to select ALL children (in any level) from a parent in jQuery?
– tomerpacific
Dec 28 '18 at 11:04
2
Your code should be working. Please update your question with a Minimal, Complete, and Verifiable example demonstrating the problem, ideally a runnable one using Stack Snippets (the[<>]toolbar button; here's how to do one).
– T.J. Crowder
Dec 28 '18 at 11:05
1
Here is an example showing that the selector works in the exact same way in both CSS and jQuery... jsfiddle.net/a0L21s6c Unless you can post code that demonstrates your problem I suggest that your issue lies elsewhere. You've probably got some more CSS affecting the page elsewhere.
– Archer
Dec 28 '18 at 11:31
1
1
$('.outer-content-warrap > *') try that– Dale
Dec 28 '18 at 11:04
$('.outer-content-warrap > *') try that– Dale
Dec 28 '18 at 11:04
2
2
Your code should work fine. Please, edit your question and provide a Minimal, Complete, and Verifiable example.
– Xufox
Dec 28 '18 at 11:04
Your code should work fine. Please, edit your question and provide a Minimal, Complete, and Verifiable example.
– Xufox
Dec 28 '18 at 11:04
1
1
Possible duplicate of How to select ALL children (in any level) from a parent in jQuery?
– tomerpacific
Dec 28 '18 at 11:04
Possible duplicate of How to select ALL children (in any level) from a parent in jQuery?
– tomerpacific
Dec 28 '18 at 11:04
2
2
Your code should be working. Please update your question with a Minimal, Complete, and Verifiable example demonstrating the problem, ideally a runnable one using Stack Snippets (the
[<>] toolbar button; here's how to do one).– T.J. Crowder
Dec 28 '18 at 11:05
Your code should be working. Please update your question with a Minimal, Complete, and Verifiable example demonstrating the problem, ideally a runnable one using Stack Snippets (the
[<>] toolbar button; here's how to do one).– T.J. Crowder
Dec 28 '18 at 11:05
1
1
Here is an example showing that the selector works in the exact same way in both CSS and jQuery... jsfiddle.net/a0L21s6c Unless you can post code that demonstrates your problem I suggest that your issue lies elsewhere. You've probably got some more CSS affecting the page elsewhere.
– Archer
Dec 28 '18 at 11:31
Here is an example showing that the selector works in the exact same way in both CSS and jQuery... jsfiddle.net/a0L21s6c Unless you can post code that demonstrates your problem I suggest that your issue lies elsewhere. You've probably got some more CSS affecting the page elsewhere.
– Archer
Dec 28 '18 at 11:31
|
show 8 more comments
1 Answer
1
active
oldest
votes
1
console.log('I have', $('.outer-content-warrap').length, '.outer-content-warrap');
console.log('I have', $('.outer-content-warrap').children().length, '.outer-content-warrap children');
console.log('I have', $('.outer-content-warrap > *').length, '.outer-content-warrap > *');
$('.outer-content-warrap').children().css('backgroundColor', 'yellow');
setTimeout(() => { $('.outer-content-warrap > *').css('backgroundColor', 'orange'); }, 5000);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer-content-warrap">
<div>Yellow</div>
<p>Yellow</p>
</div>
<div class="outer-content-warrap">
<div>Yellow</div>
<p>Yellow</p>
</div>Both work as it's supposed to. Both grab the exact same number of children objects and applies successfully the background color. Probably there is another problem with your code. Please, post full code.
answered Dec 28 '18 at 11:24
silentwsilentw
2,83731739
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
});
}
});
draft saved
draft discarded
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%2f53957469%2fhow-to-access-the-css-selecter-in-jquery%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
1
console.log('I have', $('.outer-content-warrap').length, '.outer-content-warrap');
console.log('I have', $('.outer-content-warrap').children().length, '.outer-content-warrap children');
console.log('I have', $('.outer-content-warrap > *').length, '.outer-content-warrap > *');
$('.outer-content-warrap').children().css('backgroundColor', 'yellow');
setTimeout(() => { $('.outer-content-warrap > *').css('backgroundColor', 'orange'); }, 5000);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer-content-warrap">
<div>Yellow</div>
<p>Yellow</p>
</div>
<div class="outer-content-warrap">
<div>Yellow</div>
<p>Yellow</p>
</div>Both work as it's supposed to. Both grab the exact same number of children objects and applies successfully the background color. Probably there is another problem with your code. Please, post full code.
answered Dec 28 '18 at 11:24
silentwsilentw
2,83731739
add a comment |
1
console.log('I have', $('.outer-content-warrap').length, '.outer-content-warrap');
console.log('I have', $('.outer-content-warrap').children().length, '.outer-content-warrap children');
console.log('I have', $('.outer-content-warrap > *').length, '.outer-content-warrap > *');
$('.outer-content-warrap').children().css('backgroundColor', 'yellow');
setTimeout(() => { $('.outer-content-warrap > *').css('backgroundColor', 'orange'); }, 5000);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer-content-warrap">
<div>Yellow</div>
<p>Yellow</p>
</div>
<div class="outer-content-warrap">
<div>Yellow</div>
<p>Yellow</p>
</div>Both work as it's supposed to. Both grab the exact same number of children objects and applies successfully the background color. Probably there is another problem with your code. Please, post full code.
answered Dec 28 '18 at 11:24
silentwsilentw
2,83731739
add a comment |
1
1
1
console.log('I have', $('.outer-content-warrap').length, '.outer-content-warrap');
console.log('I have', $('.outer-content-warrap').children().length, '.outer-content-warrap children');
console.log('I have', $('.outer-content-warrap > *').length, '.outer-content-warrap > *');
$('.outer-content-warrap').children().css('backgroundColor', 'yellow');
setTimeout(() => { $('.outer-content-warrap > *').css('backgroundColor', 'orange'); }, 5000);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer-content-warrap">
<div>Yellow</div>
<p>Yellow</p>
</div>
<div class="outer-content-warrap">
<div>Yellow</div>
<p>Yellow</p>
</div>Both work as it's supposed to. Both grab the exact same number of children objects and applies successfully the background color. Probably there is another problem with your code. Please, post full code.
answered Dec 28 '18 at 11:24
silentwsilentw
2,83731739
console.log('I have', $('.outer-content-warrap').length, '.outer-content-warrap');
console.log('I have', $('.outer-content-warrap').children().length, '.outer-content-warrap children');
console.log('I have', $('.outer-content-warrap > *').length, '.outer-content-warrap > *');
$('.outer-content-warrap').children().css('backgroundColor', 'yellow');
setTimeout(() => { $('.outer-content-warrap > *').css('backgroundColor', 'orange'); }, 5000);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer-content-warrap">
<div>Yellow</div>
<p>Yellow</p>
</div>
<div class="outer-content-warrap">
<div>Yellow</div>
<p>Yellow</p>
</div>Both work as it's supposed to. Both grab the exact same number of children objects and applies successfully the background color. Probably there is another problem with your code. Please, post full code.
console.log('I have', $('.outer-content-warrap').length, '.outer-content-warrap');
console.log('I have', $('.outer-content-warrap').children().length, '.outer-content-warrap children');
console.log('I have', $('.outer-content-warrap > *').length, '.outer-content-warrap > *');
$('.outer-content-warrap').children().css('backgroundColor', 'yellow');
setTimeout(() => { $('.outer-content-warrap > *').css('backgroundColor', 'orange'); }, 5000);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer-content-warrap">
<div>Yellow</div>
<p>Yellow</p>
</div>
<div class="outer-content-warrap">
<div>Yellow</div>
<p>Yellow</p>
</div>console.log('I have', $('.outer-content-warrap').length, '.outer-content-warrap');
console.log('I have', $('.outer-content-warrap').children().length, '.outer-content-warrap children');
console.log('I have', $('.outer-content-warrap > *').length, '.outer-content-warrap > *');
$('.outer-content-warrap').children().css('backgroundColor', 'yellow');
setTimeout(() => { $('.outer-content-warrap > *').css('backgroundColor', 'orange'); }, 5000);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer-content-warrap">
<div>Yellow</div>
<p>Yellow</p>
</div>
<div class="outer-content-warrap">
<div>Yellow</div>
<p>Yellow</p>
</div>answered Dec 28 '18 at 11:24
silentwsilentw
2,83731739
answered Dec 28 '18 at 11:24
silentwsilentw
2,83731739
answered Dec 28 '18 at 11:24
silentwsilentw
2,83731739
answered Dec 28 '18 at 11:24
silentwsilentw
2,83731739
2,83731739
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53957469%2fhow-to-access-the-css-selecter-in-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
1
$('.outer-content-warrap > *')try that– Dale
Dec 28 '18 at 11:04
2
Your code should work fine. Please, edit your question and provide a Minimal, Complete, and Verifiable example.
– Xufox
Dec 28 '18 at 11:04
1
Possible duplicate of How to select ALL children (in any level) from a parent in jQuery?
– tomerpacific
Dec 28 '18 at 11:04
2
Your code should be working. Please update your question with a Minimal, Complete, and Verifiable example demonstrating the problem, ideally a runnable one using Stack Snippets (the
[<>]toolbar button; here's how to do one).– T.J. Crowder
Dec 28 '18 at 11:05
1
Here is an example showing that the selector works in the exact same way in both CSS and jQuery... jsfiddle.net/a0L21s6c Unless you can post code that demonstrates your problem I suggest that your issue lies elsewhere. You've probably got some more CSS affecting the page elsewhere.
– Archer
Dec 28 '18 at 11:31