I am trying to remove the existing class (blue) and add a new class (red) to the <'h2'> when the <'a'> is empty.
<div id="heading" class="header">
<h2 id="title" class="blue">Header text goes here</h2>
<a class="info" href="#"></a>
</div>
<style>
.blue{color:blue}
.red{color:red}
</style>
I have tried a few variations but without success. This is my latest.
$("#heading a.info:empty").removeClass('blue').addClass("red");
Any help on this would be appreciated.
Use .text() to find if it is empty
var a =$(".info").text().trim();
a===""?($("#title").removeClass("blue").addClass('red')):''
JSFIDDLE
if($("#heading a.info").text() === ''){
$("#heading h2").removeClass('blue').addClass("red");
}
.blue{color:blue}
.red{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="heading" class="header">
<h2 id="title" class="blue">Header text goes here</h2>
<a class="info" href="#"></a>
</div>
if ($("#heading a.info:empty")) {
$("#title").removeClass('blue').addClass("red");
}
.blue {
color: blue
}
.red {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="heading" class="header">
<h2 id="title" class="blue">Header text goes here</h2>
<a class="info" href="#"></a>
</div>
Should remove from h2 not from anchor
:empty returns a collection of elements. And you need to add/remove class from h2,
so use .prev() to get the previous sibling.
$("#heading a.info:empty")
.prev('#title')
.removeClass('blue')
.addClass("red");
Related
What I am trying to accomplish is basically, to get a list of Elements ( currently using document.querySelectorAll() in order to get a list of elements using a general selector.
E.g: get me all elements of .note class in the document.
document.querySelectorAll('.note')
since it collects them from all over the DOM, I then need a JS function to iterate over all of them using a different function from a library that does not use NodeList, and I need it to query all these elements individually (This is an automation task so negligent benefits of speed are of no matter here).
Since these elements appear on different parts and hierarchies of the DOM, I cannot fetch them all with a CSS selector individually like :nth-of-type, I need the specific CSS Selector/ XPath of each of them.
For example, for all .note class elements on a page, I need the result to be something like:
['.my-first-class .inner .note', 'section .different-class .inner .note', '.profile .profile-notes .note']
something in this style would be extremely helpful to me.
Thank you very much for any assistance you may provide!
I borrowed a generateQuerySelector function from this answer and simply looped over the results of .note query selection, being sure to convert the NodeList to an Array.
const notes = Array.from(document.querySelectorAll('.note'))
notes.forEach(note => {
console.log(generateQuerySelector(note))
})
function generateQuerySelector (el) {
if (el.tagName.toLowerCase() == "html")
return "HTML";
var str = el.tagName;
str += (el.id != "") ? "#" + el.id : "";
if (el.className) {
var classes = el.className.split(/\s/);
for (var i = 0; i < classes.length; i++) {
str += "." + classes[i]
}
}
return generateQuerySelector(el.parentNode) + " > " + str;
}
<div class="content">
<div class="primary">
<div class="article">
<div class="note">
</div>
</div>
</div>
<div class="secondary">
<div class="aside">
<div class="note">
</div>
</div>
</div>
<div class="note">
</div>
<div id="contact-form">
<div class="note"></div>
</div>
</div>
Css can't write it down, it can only show you whatever you want in the way you want
body *{ display: block} /* only if you want single column */
.wanted::after{ content: ' wanted '; float: right; background: red; color: #000; margin: 0 5px; padding: 0 5px}
p.wanted::after{ content: 'I am a <p>'; background: #cf8;}
div.wanted::after{ content: 'I am a <div>'; background: yellow}
a.wanted::after{ content: 'href me';background: orange}
<div>div</div>
link
<p>paragraph</p>
<a class="wanted">link</a>
link
<div>div</div>
<div class="wanted">div</div>
link
<a class="wanted">link</a>
<nav class="wanted">nav</nav>
<div class="wanted"> div </div>
<div>div</div>
<p>paragraph</p>
<div class="wanted"> div </div>
<p class="wanted">paragraph</p>
link
<div class="wanted"> div </div>
<a class="wanted">link</a>
<a class="wanted">link</a>
<div class="wanted"> div </div>
<p class="wanted">paragraph</p>
<div>div</div>
<div class="wanted"> div </div>
link
<div class="wanted"> div </div>
<p class="wanted">paragraph</p>
<div>div</div>
<a class="wanted">link</a>
<div class="wanted"> div </div>
<div>div</div>
<p>paragraph</p>
<div class="wanted"> div </div>
<div>div</div>
<p class="wanted">paragraph</p>
link
<a class="wanted">link</a>
<div>div</div>
I have a div which I want to surround with an <a href>. I have the jQuery to add the <a href> after the div but I struggle to set it before and close it after the div.
This is the jQuery code I have:
$('.box_service').each(function() {
var link = $(this).html();
$(this).contents().wrap('');
});
It results in this HTML:
<div class="row">
<div class="box_service">
<a href="example.com">
<div class="inner-row"></div>
</a>
</div>
</div>
However my goal is this structure:
<div class="row">
<a href="example.com">
<div class="box_service">
<div class="inner-row"></div>
</div>
</a>
</div>
I can't enter the div before because there are more boxes in this row so I would add the <a href> to everything in there
The issue is due to your call to contents() which means you're wrapping the elements inside .box_service, not that element itself. Remove that method call.
Also note that each() is redundant, you can do what you require in a single line:
$('.box_service').wrap('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
Box service #1
<div class="inner-row">Inner row #1</div>
</div>
</div>
<div class="row">
<div class="box_service">
Box service #2
<div class="inner-row">Inner row #2</div>
</div>
</div>
.content will wrap the contents of your div, you want to wrap the div with <a> so call wrap on the div not on contents.
$('.box_service').each(function() {
var link = $(this).html();
$(this).wrap('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
<div class="inner-row"></div>
</div>
</div>
$('.box_service').each(function() {
var link = $(this).html();
$(this).wrap('');
});
You just need to remove contents() in between $(this).wrap() because contents() mean that you are wrapping the children of $(this).
Remove .contents() in order to wrap around each element with the class box-service:
$('.box_service').each(function() {
$(this).wrap('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
<a href="example.com">
<div class="inner-row"></div>
</a>
</div>
</div>
$('.box_service').wrap('');
I want the image to act as a toggle so when it's clicked on it will reveal the div with the text.
Here's the CSS class I'm using:
.hidden { display: none; }
.unhidden { display: block; }
and the JS:
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}//
Here's the HTML:
<div class="4u">
<!-- Box -->
<section class="box box-feature">
<a href="javascript:unhide('test');" class="image image-full"
<img src="images/pic01.jpg" alt="" /></a>
<div id="test" class="hidden">
<header>
<h2>Put something here</h2>
<span class="byline">Maybe here as well I think</span>
</header>
<p>Test and more text and more text and more text.</p>
</div>
</section>
</div>
You have a syntax error. Change line 4 to:
<a href="javascript:unhide('test');" class="image image-full">
Note the > at the end of the line.
Unless you're determined to use vanilla JavaScript, a much easier way would be to use jQuery. Add this to your <head>:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
And then your a href could be just javascript:$('#test').toggle() and you wouldn't need to define any functions or CSS classes.
I can't figure out how to remove class from a parent element, basically I have a <audio> tag (from now on referred to as this) which is inside a div with class="playing" how can I remove this class?
tried this, but than understood that it will remove class from audio element not it's parent div:
this.removeClass("playing");
this.parent().removeClass("playing");
$(this).closest('div').removeClass("playing")
or
$(this).closest('div.playing').removeClass('playing')
this.closest('div[class=playing]').removeClass("playing");
JSfiddle Demo
<div class="bold">
<p id="p1" class="blue under">Hello</p>
</div>
<div class="bold">
<p id="p2" class="blue under highlight">and</p>
</div>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>
$("#p1").parent().removeClass("bold");
$("input").keyup(function () {
$(this).parent().removeClass('bg-red');
});
.bg-red {
background-color: red;
}
.h-50 {
height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="h-5 bg-red">
<h3>Add text inside input will remove "bg-red" class from parent div</h3>
<input placeholder="Enter anything" type="text">
</div>
I have the following HTML structure, I want to add a class to the last <div> which contains the <p> tag but only when it exists.
<div id="view">
<div class="login">
</div>
<div>
<p>Add a class to this parent DIV</p>
</div>
</div>
Any suggestions?
Simple snippet:
if($('#view div:last p').length)
$('#view div:last').addClass('myClass');
Will get all the divs that has a p tag
p = $('#view div p');
if (p.length) {
$(p[p.length - 1]).addClass("largerText");
}
Here is the fiddle
Yes Roaster given right answer and this is the fiddle for it. http://jsfiddle.net/sameerast/qhsXM/
<div id="view">
<div class="login">
</div>
<div>
<p>Add a class to this parent DIV</p>
</div>
</div>
if($('#view div:last p').length){
$('#view div:last').addClass('myClass');
}
.myClass {
border:red 1px solid;
}