This question already has answers here:
How do I check if an element is hidden in jQuery?
(65 answers)
Closed 6 years ago.
<li style="padding-bottom: 0px; display: none;">
<span> Content </span>
</li>
i want to check display == none
i got the solution with the below script.
if($(this).closest('li').attr('style') =='padding-bottom: 0px; display: none;'){
// script
}
any other simple way to write.
Thanks
The issue you have is that you're mixing jQuery and vanilla JS methods here, with .attr().display. You're also trying to compare the whole style string against (if it worked) one CSS rule.
A better method of achieving this would be to use jQuery's is() method, along with the :visible selector. Try this:
if ($(this).closest('li').is(':visible')) {
// script
}
If you want only to check if the element is hidden you can check if the display is set to none using css() method. Using .attr('style') it will return the whole style on the element.
if($(this).closest('li').css('display') == 'none' ){
}
Working demonstrative example (I've put the inline style just for demonstration, but I don't recommend you to use it):
$('li').each(function(i) {
if ($(this).css('display') == 'none') {
console.log(i); // logs the indexes of the hidden elements
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li style="padding-bottom: 0px; display: none;">
<span> Content </span>
</li>
<li style="padding-bottom: 0px; display: none;">
<span> Content </span>
</li>
<li style="padding-bottom: 0px;">
<span> Content </span>
</li>
You can use :visible or :hidden selectors directly:
if ( $('li:visible').length > 0 ) {
// it is visible
}
You can use :visible or :hidden selectors with is():
if ( $('li').is(':visible') ) {
// it is visible
}
Finally, you can check the specific value of 'display' with css():
if ( $('li').css('display') === 'none' ) {
// it is hidden
}
Related
I want to add class "active" to "fav-contractors" container only when number inside "fav-con-count" span is greater than 0.
This is HTML code
<span class="fav-contractors">
<span class="fav-con-count">7</span>
</span>
and this is jQuery code
function favCounter() {
if ($(".fav-con-count").textContent > 0) {
$(".fav-contractors").addClass("active");
}
};
favCounter();
Which "if" rule should I use? I also tried something like that but it didn't work:
function favCounter() {
var favValue = $(".fav-con-count").textContent;
if (+favValue > 0)) {
$(".fav-contractors").addClass("active");
}
};
favCounter();
Node.textContent is JavaScript, not part of the jQuery library per-se. jQuery uses the .text() method to get the text by using textContent under the hood. Also, read about jQuery's toggleClass() method, you can use a second boolean parameter instead, making the if statement unnecessary.
Since you use classes it's pretty dangerous to just do $(".fav-contractors").addClass("active");, since you could:
have many .fav-contractors Elements in a single page and all will get the active class
$(".fav-con-count").text() > 0 means that only if the first of that class Element has text greater than 0 - which might also be incorrect and lead to a buggy undesired behavior.
Solution
Use .each() to iterate all your elements of a specific class
Use .closest() to traverse to a specific element ancestor (or self)
(As already mentioned) use toggleClass()
$(".fav-con-count").each(function() {
$(this).closest(".fav-contractors").toggleClass("active", $(this).text() > 0);
});
.fav-contractors { padding: 1rem; }
.active { background: gold; }
<span class="fav-contractors">
<span class="fav-con-count">7</span>
</span>
<span class="fav-contractors">
<span class="fav-con-count">0</span>
</span>
<span class="fav-contractors">
<span class="fav-con-count">3</span>
</span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
You should use .text() instead of textContent
function favCounter() {
if ($(".fav-con-count").text() > 0) {
$(".fav-contractors").addClass("active");
}
};
favCounter();
.active {
background: yellow;
}
<span class="fav-contractors">
<span class="fav-con-count">7</span>
</span>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
This is an example of the number 0 not adding the active class
function favCounter() {
if ($(".fav-con-count").text() > 0) {
$(".fav-contractors").addClass("active");
}
};
favCounter();
.active {
background: yellow;
}
<span class="fav-contractors">
<span class="fav-con-count">0</span>
</span>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
Hi,
I have this markup:
<div data-users="room2">
<span data-room="room1,room2,room3">john</span>
<span data-room="room1">george</span>
<span data-room="room2">jane</span>
</div>
I want only users that have the same room data as the div parent so I wrote this css:
span { display: none; }
[data-users="room2"] [data-room*="room2"] { display: block; }
fiddle: https://jsfiddle.net/ehpt9f5z/2/
However, since the data in the div parent can change to any room number I need a variable there so the CSS selector will always match the room data from the child with its parent, something like this:
[data-users=$1] [data-room*=$1] { display: block; }
Is it even possible with pure css?
Thank you.
This is not accomplishable with CSS alone, since there is no CSS parent selector.
A JavaScript solution would be to loop through each div which has the data-users attribute, then loop through each child of the div and show the ones whose data-room attribute contains the data-users attribute value.
const divs = document.querySelectorAll('div[data-users]')
divs.forEach(e => [...e.children].forEach(f => {
if(f.dataset.room.split(',').includes(e.dataset.users)){
f.style.display = "block"
}
}))
span { display: none; }
<div data-users="room2">
<span data-room="room1,room2,room3">john</span>
<span data-room="room1">george</span>
<span data-room="room2">jane</span>
</div>
This question already has answers here:
CSS Child vs Descendant selectors
(8 answers)
Closed 1 year ago.
I tried this solution but am missing something: change background of parent div on hover
Here is my html:
<div class="box">
<h3 class="page-header item-title">
<a class="titlelink" href="/index.php?option=com_content&view=category&id=11&Itemid=234">
Modeling</a>
This is what I tried to use in an override here: /templates/shaper_helixultimate/html/com_content/category/default_children.php
$document = JFactory::getDocument();
$document->addScriptDeclaration('
$('.box > .titlelink').hover(function(){
$(this).parent().toggleClass('hover');
})
});
');
http://jsfiddle.net/t5hf8qdc/
What am I doing wrong?
$('.box > .titlelink').hover(function() {
$(this).parent().toggleClass('hover');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<h3 class="page-header item-title">
<a class="titlelink" href="/index.php?option=com_content&view=category&id=11&Itemid=234">
Modeling</a>
</h3>
</div>
The selector .box > .titlelink looks for a parent-child relationship. You don't have that.
Use .box .titlelink instead.
$('.box .titlelink').hover(function() {
$(this).parent().toggleClass('hover');
});
.hover {
background: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<h3 class="page-header item-title">
<a class="titlelink" href="/index.php?option=com_content&view=category&id=11&Itemid=234">
Modeling</a>
</h3>
</div>
As #isherwood mentioned, the solution you linked to uses a different structure than what you have. The > in CSS selectors specifies that you're targeting a direct child, while just leaving a space between the two selectors looks for any descendant.
.box > .titlelink {
/* targets where .titlelink is a child of .box */
}
.box .titlelink {
/* targets where .titlelink is a descendant of .box */
}
If you want to use a strict CSS selector like the solution you referenced, you could do:
$('.box > .item-title > .titlelink').hover(function(){
$(this).parent().toggleClass('hover');
});
Although this will add the hover class to the .item-title element, not to the .box element. Assuming that you specifically want target the .box ancestor of whatever you're listening for the hover event on, then you want:
$('.box > .item-title > .titlelink').hover(function(){
$(this).parents('.box').toggleClass('hover');
});
since jQuery's parents method allows you to pass a selector to target a specific ancestor, travelling multiple levels up through the tree.
i have 4 url parameters like so
http://127.0.0.1:4000/post?&id=5f04698e6114e4069099d8bf#like
http://127.0.0.1:4000/post?&id=5f04698e6114e4069099d8bf#comment
http://127.0.0.1:4000/post?&id=5f04698e6114e4069099d8bf#share
http://127.0.0.1:4000/post?&id=5f04698e6114e4069099d8bf#save
and 4 divs like
html
<div id='like' class='hide'></div>
<div id='comment' class='hide'></div>
<div id='share' class='hide'></div>
<div id='save' class='hide'></div>
and
css
.hide{
display:none;
}
how do i unhide elements when a url param is searched,
for example if i search for
http://127.0.0.1:4000/post?&id=5f04698e6114e4069099d8bf#like
the div with id='like should be now visible
what i have tried
i have tried to unhide the elements on button click, and I am successful using classList.toggle('hide')
but how do I achieve the same thing with changes in url. I would be best if the classList is set acc to the url for example when there is #like in url ,the element with id like should not contain the class hide anymore. other answers are also accepted ,thanks.
No JavaScript needed. Use the CSS :target selector like:
#like.hide:target {display:block;}
.hide {
display: none;
}
#like.hide:target,
#comment.hide:target,
#share.hide:target,
#save.hide:target {
display: block;
}
<div id='like' class='hide'>like</div>
<div id='comment' class='hide'>comment</div>
<div id='share' class='hide'>share</div>
<div id='save' class='hide'>save</div>
like
comment
share
save
A JavaScript approach would be as follow:
like.style.display = "none";
You could implement if statement to trigger that line if this is what you prefer.
This question already has answers here:
First-child pseudo selector issue with heading tag
(2 answers)
Closed 8 years ago.
I'm trying to make a css class that would give a background color to the first found element with a specific tag..
This CSS
.blue p:first-of-type {
background-color:#2E9AFE;
}
Works for example 1:
<div class="blue">
<p>element 1</p>
<p>element 2</p>
<p>element 2</p>
</div>
Doesn't work for example 2:
<div class="blue">
<ul>
<li><p>Parent 1</p>
<ul>
<li><p>Element 1.1</p></li>
<li><p>Element 1.2</p></li>
</ul>
</li>
</ul>
</ul>
In example 2, first element with tag p is Parent 1, however my code colors every element. Why?
Fiddle: http://jsfiddle.net/alexix/CYX32/1/
The :first-of-type selector selects the first of type contained within its parent element. In each case, the p is the first of type within their li elements.
If you wish to select the first of type p within the first of type li within the first of type ul you're going to have to use the following selector:
.blue > ul:first-of-type > li:first-of-type > p:first-of-type {
background-color:#2E9AFE;
}
JSFiddle demo.
If you are trying to color the first occurence of p tag. and you don't know where exactly it is then I think the only way is to use javascript.
Javascript:
var blue = document.getElementsByClassName('blue')[0];
var p = blue.getElementsByTagName('p')[0];
p.className = 'blueContent';
CSS
.blueContent {
background-color:#2E9AFE;
}
Working Fiddle
Please try
.blue > ul > li > p {
background-color:#2E9AFE;
}
Can you use jQuery to solve this? Here's one way to do it:
$(document).ready(function(){
$('.blue').each(function(index, obj){
var $p = $(this).find('p').eq(0);
$p.css('background-color', '#2e9afe');
})
});
fiddle