Apply class to parent UL if child LI contains specific class The 2019 Stack Overflow Developer Survey Results Are InHow to change an element's class with JavaScript?How to apply CSS to iframe?How to insert an item into an array at a specific index (JavaScript)?Is there a CSS parent selector?How can I select an element with multiple classes in jQuery?How to check whether a string contains a substring in JavaScript?What is the difference between call and apply?How do I auto-resize an image to fit a 'div' container?What is the best way to conditionally apply a class?Is it possible to apply CSS to half of a character?
Can you compress metal and what would be the consequences?
Right tool to dig six foot holes?
Multiply Two Integer Polynomials
What is the meaning of Triage in Cybersec world?
What is the closest word meaning "respect for time / mindful"
Why is the Constellation's nose gear so long?
What is the accessibility of a package's `Private` context variables?
Why can Shazam fly?
What are the motivations for publishing new editions of an existing textbook, beyond new discoveries in a field?
Am I thawing this London Broil safely?
Why do some words that are not inflected have an umlaut?
slides for 30min~1hr skype tenure track application interview
Apparent duplicates between Haynes service instructions and MOT
Why didn't the Event Horizon Telescope team mention Sagittarius A*?
Loose spokes after only a few rides
Resizing object distorts it (Illustrator CC 2018)
What did it mean to "align" a radio?
Did 3000BC Egyptians use meteoric iron weapons?
Why is the maximum length of OpenWrt’s root password 8 characters?
Worn-tile Scrabble
Deal with toxic manager when you can't quit
Can a flute soloist sit?
Are there any other methods to apply to solving simultaneous equations?
How technical should a Scrum Master be to effectively remove impediments?
Apply class to parent UL if child LI contains specific class
The 2019 Stack Overflow Developer Survey Results Are InHow to change an element's class with JavaScript?How to apply CSS to iframe?How to insert an item into an array at a specific index (JavaScript)?Is there a CSS parent selector?How can I select an element with multiple classes in jQuery?How to check whether a string contains a substring in JavaScript?What is the difference between call and apply?How do I auto-resize an image to fit a 'div' container?What is the best way to conditionally apply a class?Is it possible to apply CSS to half of a character?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I'm currently working on a side menu that will list all pages in the relative section. I pretty much have this sorted apart from 1 small thing. We have 2 levels of dropdowns meaning there are an awful lot of links.
The LI that is active will have the class of .current_page_item. I'm trying to work out a way of saying:
If the UL has a child LI containing .current_page_item class then apply .side_open class to the UL.
$(document).ready(function()
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Demo 1
<ul>
<li class="current_page_item">Demo 11</li>
</ul>
</li>
<li>Demo 2
<ul>
<li>Demo 21</li>
</ul>
</li>
<li>Demo 3
<ul>
<li>Demo 31</li>
</ul>
</li>
<li>Demo 4
<ul>
<li>Demo 41</li>
</ul>
</li>
</ul>If anyone has any ideas on how this can be done your help would be greatly appreciated!
javascript jquery html css
edited Mar 8 at 9:26
ElusiveCoder
1,4121421
asked Mar 8 at 8:56
ScottScott
11
add a comment |
I'm currently working on a side menu that will list all pages in the relative section. I pretty much have this sorted apart from 1 small thing. We have 2 levels of dropdowns meaning there are an awful lot of links.
The LI that is active will have the class of .current_page_item. I'm trying to work out a way of saying:
If the UL has a child LI containing .current_page_item class then apply .side_open class to the UL.
$(document).ready(function()
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Demo 1
<ul>
<li class="current_page_item">Demo 11</li>
</ul>
</li>
<li>Demo 2
<ul>
<li>Demo 21</li>
</ul>
</li>
<li>Demo 3
<ul>
<li>Demo 31</li>
</ul>
</li>
<li>Demo 4
<ul>
<li>Demo 41</li>
</ul>
</li>
</ul>If anyone has any ideas on how this can be done your help would be greatly appreciated!
javascript jquery html css
edited Mar 8 at 9:26
ElusiveCoder
1,4121421
asked Mar 8 at 8:56
ScottScott
11
1
Please show your code that have you tried yet
– Nitin Garg
Mar 8 at 9:04
add a comment |
I'm currently working on a side menu that will list all pages in the relative section. I pretty much have this sorted apart from 1 small thing. We have 2 levels of dropdowns meaning there are an awful lot of links.
The LI that is active will have the class of .current_page_item. I'm trying to work out a way of saying:
If the UL has a child LI containing .current_page_item class then apply .side_open class to the UL.
$(document).ready(function()
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Demo 1
<ul>
<li class="current_page_item">Demo 11</li>
</ul>
</li>
<li>Demo 2
<ul>
<li>Demo 21</li>
</ul>
</li>
<li>Demo 3
<ul>
<li>Demo 31</li>
</ul>
</li>
<li>Demo 4
<ul>
<li>Demo 41</li>
</ul>
</li>
</ul>If anyone has any ideas on how this can be done your help would be greatly appreciated!
javascript jquery html css
edited Mar 8 at 9:26
ElusiveCoder
1,4121421
asked Mar 8 at 8:56
ScottScott
11
I'm currently working on a side menu that will list all pages in the relative section. I pretty much have this sorted apart from 1 small thing. We have 2 levels of dropdowns meaning there are an awful lot of links.
The LI that is active will have the class of .current_page_item. I'm trying to work out a way of saying:
If the UL has a child LI containing .current_page_item class then apply .side_open class to the UL.
$(document).ready(function()
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Demo 1
<ul>
<li class="current_page_item">Demo 11</li>
</ul>
</li>
<li>Demo 2
<ul>
<li>Demo 21</li>
</ul>
</li>
<li>Demo 3
<ul>
<li>Demo 31</li>
</ul>
</li>
<li>Demo 4
<ul>
<li>Demo 41</li>
</ul>
</li>
</ul>If anyone has any ideas on how this can be done your help would be greatly appreciated!
$(document).ready(function()
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Demo 1
<ul>
<li class="current_page_item">Demo 11</li>
</ul>
</li>
<li>Demo 2
<ul>
<li>Demo 21</li>
</ul>
</li>
<li>Demo 3
<ul>
<li>Demo 31</li>
</ul>
</li>
<li>Demo 4
<ul>
<li>Demo 41</li>
</ul>
</li>
</ul>$(document).ready(function()
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Demo 1
<ul>
<li class="current_page_item">Demo 11</li>
</ul>
</li>
<li>Demo 2
<ul>
<li>Demo 21</li>
</ul>
</li>
<li>Demo 3
<ul>
<li>Demo 31</li>
</ul>
</li>
<li>Demo 4
<ul>
<li>Demo 41</li>
</ul>
</li>
</ul>javascript jquery html css
javascript jquery html css
edited Mar 8 at 9:26
ElusiveCoder
1,4121421
asked Mar 8 at 8:56
ScottScott
11
edited Mar 8 at 9:26
ElusiveCoder
1,4121421
asked Mar 8 at 8:56
ScottScott
11
edited Mar 8 at 9:26
ElusiveCoder
1,4121421
edited Mar 8 at 9:26
ElusiveCoder
1,4121421
edited Mar 8 at 9:26
ElusiveCoder
1,4121421
1,4121421
asked Mar 8 at 8:56
ScottScott
11
asked Mar 8 at 8:56
ScottScott
11
asked Mar 8 at 8:56
ScottScott
11
11
1
Please show your code that have you tried yet
– Nitin Garg
Mar 8 at 9:04
add a comment |
1
Please show your code that have you tried yet
– Nitin Garg
Mar 8 at 9:04
1
1
Please show your code that have you tried yet
– Nitin Garg
Mar 8 at 9:04
Please show your code that have you tried yet
– Nitin Garg
Mar 8 at 9:04
add a comment |
3 Answers
3
active
oldest
votes
From what I understand, you want to style the direct parent if the li is selected.
(Comment me if I'm wrong)
So, the following should be what you want to achieve:
(Done with some Javascript)
$(document).ready(function()
$('ul>li>ul>li').each(function()
if ($(this).hasClass('current_page_item'))
$(this).parent().addClass('side_open');
);
);.side_open
background: #ddd;
.current_page_item
background: #bbb;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Demo 1
<ul>
<li class="current_page_item">Demo 11</li>
</ul>
</li>
<li>Demo 2
<ul>
<li>Demo 21</li>
</ul>
</li>
<li>Demo 3
<ul>
<li>Demo 31</li>
</ul>
</li>
<li>Demo 4
<ul>
<li>Demo 41</li>
</ul>
</li>
</ul>answered Mar 8 at 9:39
Takit IsyTakit Isy
6,33221032
add a comment |
You can use .parentElement property to access li's ul.
const linksArray = [...document.querySelectorAll('li')];
linksArray.forEach(link =>
link.onclick = function()
linksArray.forEach(link => link.classList.remove('current_page_item'))
this.classList.add('current_page_item')
this.parentElement.classList.add('side_open')
).current_page_item
background-color: aliceblue;
.side_open:before
content: 'I have side open class';
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>answered Mar 8 at 9:07
dporechnydporechny
50229
add a comment |
You can do it using jquery. It's very simple, using each loop, traverse and check for class in each LI and add .side_open class in it's parent if that li has .current_page_item class.
$(document).ready(function()
$('ul.main_ul>li>ul.sub_ul>li').each(function()
if($(this).hasClass('current_page_item'))
$(this).parent().addClass('side_open');
);
);.side_open
background-color: red;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main_ul">
<li class="main_li">Demo 1
<ul class="sub_ul">
<li class="current_page_item">Demo 11</li>
<li class="current_page_item">Demo 12</li>
</ul>
</li>
<li class="main_li">Demo 2
<ul class="sub_ul">
<li>Demo 21</li>
<li>Demo 22</li>
</ul>
</li>
<li class="main_li">Demo 3
<ul class="sub_ul">
<li>Demo 31</li>
<li>Demo 32</li>
</ul>
</li>
<li class="main_li">Demo 4
<ul class="sub_ul">
<li>Demo 41</li>
<li>Demo 42</li>
</ul>
</li>
</ul>answered Mar 8 at 9:20
ElusiveCoderElusiveCoder
1,4121421
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%2f55059688%2fapply-class-to-parent-ul-if-child-li-contains-specific-class%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
From what I understand, you want to style the direct parent if the li is selected.
(Comment me if I'm wrong)
So, the following should be what you want to achieve:
(Done with some Javascript)
$(document).ready(function()
$('ul>li>ul>li').each(function()
if ($(this).hasClass('current_page_item'))
$(this).parent().addClass('side_open');
);
);.side_open
background: #ddd;
.current_page_item
background: #bbb;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Demo 1
<ul>
<li class="current_page_item">Demo 11</li>
</ul>
</li>
<li>Demo 2
<ul>
<li>Demo 21</li>
</ul>
</li>
<li>Demo 3
<ul>
<li>Demo 31</li>
</ul>
</li>
<li>Demo 4
<ul>
<li>Demo 41</li>
</ul>
</li>
</ul>answered Mar 8 at 9:39
Takit IsyTakit Isy
6,33221032
add a comment |
From what I understand, you want to style the direct parent if the li is selected.
(Comment me if I'm wrong)
So, the following should be what you want to achieve:
(Done with some Javascript)
$(document).ready(function()
$('ul>li>ul>li').each(function()
if ($(this).hasClass('current_page_item'))
$(this).parent().addClass('side_open');
);
);.side_open
background: #ddd;
.current_page_item
background: #bbb;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Demo 1
<ul>
<li class="current_page_item">Demo 11</li>
</ul>
</li>
<li>Demo 2
<ul>
<li>Demo 21</li>
</ul>
</li>
<li>Demo 3
<ul>
<li>Demo 31</li>
</ul>
</li>
<li>Demo 4
<ul>
<li>Demo 41</li>
</ul>
</li>
</ul>answered Mar 8 at 9:39
Takit IsyTakit Isy
6,33221032
add a comment |
From what I understand, you want to style the direct parent if the li is selected.
(Comment me if I'm wrong)
So, the following should be what you want to achieve:
(Done with some Javascript)
$(document).ready(function()
$('ul>li>ul>li').each(function()
if ($(this).hasClass('current_page_item'))
$(this).parent().addClass('side_open');
);
);.side_open
background: #ddd;
.current_page_item
background: #bbb;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Demo 1
<ul>
<li class="current_page_item">Demo 11</li>
</ul>
</li>
<li>Demo 2
<ul>
<li>Demo 21</li>
</ul>
</li>
<li>Demo 3
<ul>
<li>Demo 31</li>
</ul>
</li>
<li>Demo 4
<ul>
<li>Demo 41</li>
</ul>
</li>
</ul>answered Mar 8 at 9:39
Takit IsyTakit Isy
6,33221032
From what I understand, you want to style the direct parent if the li is selected.
(Comment me if I'm wrong)
So, the following should be what you want to achieve:
(Done with some Javascript)
$(document).ready(function()
$('ul>li>ul>li').each(function()
if ($(this).hasClass('current_page_item'))
$(this).parent().addClass('side_open');
);
);.side_open
background: #ddd;
.current_page_item
background: #bbb;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Demo 1
<ul>
<li class="current_page_item">Demo 11</li>
</ul>
</li>
<li>Demo 2
<ul>
<li>Demo 21</li>
</ul>
</li>
<li>Demo 3
<ul>
<li>Demo 31</li>
</ul>
</li>
<li>Demo 4
<ul>
<li>Demo 41</li>
</ul>
</li>
</ul>$(document).ready(function()
$('ul>li>ul>li').each(function()
if ($(this).hasClass('current_page_item'))
$(this).parent().addClass('side_open');
);
);.side_open
background: #ddd;
.current_page_item
background: #bbb;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Demo 1
<ul>
<li class="current_page_item">Demo 11</li>
</ul>
</li>
<li>Demo 2
<ul>
<li>Demo 21</li>
</ul>
</li>
<li>Demo 3
<ul>
<li>Demo 31</li>
</ul>
</li>
<li>Demo 4
<ul>
<li>Demo 41</li>
</ul>
</li>
</ul>$(document).ready(function()
$('ul>li>ul>li').each(function()
if ($(this).hasClass('current_page_item'))
$(this).parent().addClass('side_open');
);
);.side_open
background: #ddd;
.current_page_item
background: #bbb;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Demo 1
<ul>
<li class="current_page_item">Demo 11</li>
</ul>
</li>
<li>Demo 2
<ul>
<li>Demo 21</li>
</ul>
</li>
<li>Demo 3
<ul>
<li>Demo 31</li>
</ul>
</li>
<li>Demo 4
<ul>
<li>Demo 41</li>
</ul>
</li>
</ul>answered Mar 8 at 9:39
Takit IsyTakit Isy
6,33221032
answered Mar 8 at 9:39
Takit IsyTakit Isy
6,33221032
answered Mar 8 at 9:39
Takit IsyTakit Isy
6,33221032
answered Mar 8 at 9:39
Takit IsyTakit Isy
6,33221032
6,33221032
add a comment |
add a comment |
You can use .parentElement property to access li's ul.
const linksArray = [...document.querySelectorAll('li')];
linksArray.forEach(link =>
link.onclick = function()
linksArray.forEach(link => link.classList.remove('current_page_item'))
this.classList.add('current_page_item')
this.parentElement.classList.add('side_open')
).current_page_item
background-color: aliceblue;
.side_open:before
content: 'I have side open class';
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>answered Mar 8 at 9:07
dporechnydporechny
50229
add a comment |
You can use .parentElement property to access li's ul.
const linksArray = [...document.querySelectorAll('li')];
linksArray.forEach(link =>
link.onclick = function()
linksArray.forEach(link => link.classList.remove('current_page_item'))
this.classList.add('current_page_item')
this.parentElement.classList.add('side_open')
).current_page_item
background-color: aliceblue;
.side_open:before
content: 'I have side open class';
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>answered Mar 8 at 9:07
dporechnydporechny
50229
add a comment |
You can use .parentElement property to access li's ul.
const linksArray = [...document.querySelectorAll('li')];
linksArray.forEach(link =>
link.onclick = function()
linksArray.forEach(link => link.classList.remove('current_page_item'))
this.classList.add('current_page_item')
this.parentElement.classList.add('side_open')
).current_page_item
background-color: aliceblue;
.side_open:before
content: 'I have side open class';
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>answered Mar 8 at 9:07
dporechnydporechny
50229
You can use .parentElement property to access li's ul.
const linksArray = [...document.querySelectorAll('li')];
linksArray.forEach(link =>
link.onclick = function()
linksArray.forEach(link => link.classList.remove('current_page_item'))
this.classList.add('current_page_item')
this.parentElement.classList.add('side_open')
).current_page_item
background-color: aliceblue;
.side_open:before
content: 'I have side open class';
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>const linksArray = [...document.querySelectorAll('li')];
linksArray.forEach(link =>
link.onclick = function()
linksArray.forEach(link => link.classList.remove('current_page_item'))
this.classList.add('current_page_item')
this.parentElement.classList.add('side_open')
).current_page_item
background-color: aliceblue;
.side_open:before
content: 'I have side open class';
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>const linksArray = [...document.querySelectorAll('li')];
linksArray.forEach(link =>
link.onclick = function()
linksArray.forEach(link => link.classList.remove('current_page_item'))
this.classList.add('current_page_item')
this.parentElement.classList.add('side_open')
).current_page_item
background-color: aliceblue;
.side_open:before
content: 'I have side open class';
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>answered Mar 8 at 9:07
dporechnydporechny
50229
answered Mar 8 at 9:07
dporechnydporechny
50229
answered Mar 8 at 9:07
dporechnydporechny
50229
answered Mar 8 at 9:07
dporechnydporechny
50229
50229
add a comment |
add a comment |
You can do it using jquery. It's very simple, using each loop, traverse and check for class in each LI and add .side_open class in it's parent if that li has .current_page_item class.
$(document).ready(function()
$('ul.main_ul>li>ul.sub_ul>li').each(function()
if($(this).hasClass('current_page_item'))
$(this).parent().addClass('side_open');
);
);.side_open
background-color: red;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main_ul">
<li class="main_li">Demo 1
<ul class="sub_ul">
<li class="current_page_item">Demo 11</li>
<li class="current_page_item">Demo 12</li>
</ul>
</li>
<li class="main_li">Demo 2
<ul class="sub_ul">
<li>Demo 21</li>
<li>Demo 22</li>
</ul>
</li>
<li class="main_li">Demo 3
<ul class="sub_ul">
<li>Demo 31</li>
<li>Demo 32</li>
</ul>
</li>
<li class="main_li">Demo 4
<ul class="sub_ul">
<li>Demo 41</li>
<li>Demo 42</li>
</ul>
</li>
</ul>answered Mar 8 at 9:20
ElusiveCoderElusiveCoder
1,4121421
add a comment |
You can do it using jquery. It's very simple, using each loop, traverse and check for class in each LI and add .side_open class in it's parent if that li has .current_page_item class.
$(document).ready(function()
$('ul.main_ul>li>ul.sub_ul>li').each(function()
if($(this).hasClass('current_page_item'))
$(this).parent().addClass('side_open');
);
);.side_open
background-color: red;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main_ul">
<li class="main_li">Demo 1
<ul class="sub_ul">
<li class="current_page_item">Demo 11</li>
<li class="current_page_item">Demo 12</li>
</ul>
</li>
<li class="main_li">Demo 2
<ul class="sub_ul">
<li>Demo 21</li>
<li>Demo 22</li>
</ul>
</li>
<li class="main_li">Demo 3
<ul class="sub_ul">
<li>Demo 31</li>
<li>Demo 32</li>
</ul>
</li>
<li class="main_li">Demo 4
<ul class="sub_ul">
<li>Demo 41</li>
<li>Demo 42</li>
</ul>
</li>
</ul>answered Mar 8 at 9:20
ElusiveCoderElusiveCoder
1,4121421
add a comment |
You can do it using jquery. It's very simple, using each loop, traverse and check for class in each LI and add .side_open class in it's parent if that li has .current_page_item class.
$(document).ready(function()
$('ul.main_ul>li>ul.sub_ul>li').each(function()
if($(this).hasClass('current_page_item'))
$(this).parent().addClass('side_open');
);
);.side_open
background-color: red;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main_ul">
<li class="main_li">Demo 1
<ul class="sub_ul">
<li class="current_page_item">Demo 11</li>
<li class="current_page_item">Demo 12</li>
</ul>
</li>
<li class="main_li">Demo 2
<ul class="sub_ul">
<li>Demo 21</li>
<li>Demo 22</li>
</ul>
</li>
<li class="main_li">Demo 3
<ul class="sub_ul">
<li>Demo 31</li>
<li>Demo 32</li>
</ul>
</li>
<li class="main_li">Demo 4
<ul class="sub_ul">
<li>Demo 41</li>
<li>Demo 42</li>
</ul>
</li>
</ul>answered Mar 8 at 9:20
ElusiveCoderElusiveCoder
1,4121421
You can do it using jquery. It's very simple, using each loop, traverse and check for class in each LI and add .side_open class in it's parent if that li has .current_page_item class.
$(document).ready(function()
$('ul.main_ul>li>ul.sub_ul>li').each(function()
if($(this).hasClass('current_page_item'))
$(this).parent().addClass('side_open');
);
);.side_open
background-color: red;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main_ul">
<li class="main_li">Demo 1
<ul class="sub_ul">
<li class="current_page_item">Demo 11</li>
<li class="current_page_item">Demo 12</li>
</ul>
</li>
<li class="main_li">Demo 2
<ul class="sub_ul">
<li>Demo 21</li>
<li>Demo 22</li>
</ul>
</li>
<li class="main_li">Demo 3
<ul class="sub_ul">
<li>Demo 31</li>
<li>Demo 32</li>
</ul>
</li>
<li class="main_li">Demo 4
<ul class="sub_ul">
<li>Demo 41</li>
<li>Demo 42</li>
</ul>
</li>
</ul>$(document).ready(function()
$('ul.main_ul>li>ul.sub_ul>li').each(function()
if($(this).hasClass('current_page_item'))
$(this).parent().addClass('side_open');
);
);.side_open
background-color: red;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main_ul">
<li class="main_li">Demo 1
<ul class="sub_ul">
<li class="current_page_item">Demo 11</li>
<li class="current_page_item">Demo 12</li>
</ul>
</li>
<li class="main_li">Demo 2
<ul class="sub_ul">
<li>Demo 21</li>
<li>Demo 22</li>
</ul>
</li>
<li class="main_li">Demo 3
<ul class="sub_ul">
<li>Demo 31</li>
<li>Demo 32</li>
</ul>
</li>
<li class="main_li">Demo 4
<ul class="sub_ul">
<li>Demo 41</li>
<li>Demo 42</li>
</ul>
</li>
</ul>$(document).ready(function()
$('ul.main_ul>li>ul.sub_ul>li').each(function()
if($(this).hasClass('current_page_item'))
$(this).parent().addClass('side_open');
);
);.side_open
background-color: red;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main_ul">
<li class="main_li">Demo 1
<ul class="sub_ul">
<li class="current_page_item">Demo 11</li>
<li class="current_page_item">Demo 12</li>
</ul>
</li>
<li class="main_li">Demo 2
<ul class="sub_ul">
<li>Demo 21</li>
<li>Demo 22</li>
</ul>
</li>
<li class="main_li">Demo 3
<ul class="sub_ul">
<li>Demo 31</li>
<li>Demo 32</li>
</ul>
</li>
<li class="main_li">Demo 4
<ul class="sub_ul">
<li>Demo 41</li>
<li>Demo 42</li>
</ul>
</li>
</ul>answered Mar 8 at 9:20
ElusiveCoderElusiveCoder
1,4121421
answered Mar 8 at 9:20
ElusiveCoderElusiveCoder
1,4121421
answered Mar 8 at 9:20
ElusiveCoderElusiveCoder
1,4121421
answered Mar 8 at 9:20
ElusiveCoderElusiveCoder
1,4121421
1,4121421
add a comment |
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.
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%2f55059688%2fapply-class-to-parent-ul-if-child-li-contains-specific-class%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
Please show your code that have you tried yet
– Nitin Garg
Mar 8 at 9:04