I want to check if my title <h3> has the class highlight so I founded How to check if element contains specific class attribute but I'm not sure about how to fit it to my use case because it's not the <h3> which contains the class but the span inside it:
I tried to do this code:
$('.liContainer div h3').each(function(i, obj) {
var contains = false;
String classes = obj.getAttribute("class");
for (String c : classes.split(" ")) {
if (c.equals("highlight")) {
contains = true;
}
}
if(contains){
obj.classList.remove("highlight");
}
});
but I got an error with the actual code:
imports/ui/layout.js:42:13: Unexpected token (42:13)
and it's the line String classes = obj.getAttribute("class");
Could someone help me to make it works ?
[EDIT] with the help of your answer I'm now here:
'click .liContainer div h3': function(e){
if ( $(e.target).find("span").is(".highlight") ) {
console.log("it was highlighted");
$(e.target).find("span").removeClass('highlight');
}
},
and it works so thank you everybody
I hope it will help you
$('.liContainer div h3').each(function(i, obj) {
if ( $(this).find("span").is(".highlight") ) {
// do something
}
});
**can you just help me to do the action only on the clicked h3?**
If `click` action:
$('.liContainer div h3').click(function() {
if ( $(this).find("span").is(".highlight") ) {
// do something
}
});
I use your code, and change the content of the `each` loop.
You loop each `<h3>` and check if child `<span>` has class `.highlight`, then you do something...
The above Code can also be written as follows:
$('.liContainer div h3').click(function() {
if ( $(this).find("span.highlight") ) {
// do something
}
});
Hope this works fine.
$('h3').filter(function(){
return $(this).find('span.highlight').length != 0;
}) // do something with it
A rough way to know if you don't know have child selector
$('#nameMachine *').hasClass('yourClass'); // either true or false
Since you are using jquery, how about this simple solution:
$('.liContainer div h3 .highlight').removeClass('highlight');
Try using `has` selector as given below code :
$('.liContainer div h3:has(span.highlight)').each(function(){
// code here
});
You may try something like:
if( $("h3", "#nameMachine").has(".highlight") ) {
// do something
}
Or a more specific version:
if( $("> h3", "#nameMachine").has("span.highlight") ) {
// do something
}
$('span.highlight','.liContainer div h3').removeClass('highlight')
Please note that the second css selector is to determine the scope of searching the first css selector.
find() will be searching in all of child element . So if there have wanted class its length will be 1 else length is 0.
$('.liContainer div h3').each(function(i, obj) {
var hasClass = $(obj).find(".highlight");
if (hasClass.length) {
hasClass[0].classList.remove("highlight");
}
});
This will do. hasClass documentation is here
$("#nameMachine h3").hasClass("highlight")
if ($('#parent').find('#child').length) {
}
Related
I need that when my div is empty, remove if not, run the appendChild code. I'm not getting the logic right, I think
$(window).on("load", function() {
if ('#leftmenu:empty') {
$('#leftmenu:empty').remove();
} else {
document.querySelector('.iframe-output').appendChild(
document.querySelector('.paddingbox iframe')
}
});
$(window).on("load", function() {
if ($('#leftmenu').html().length == 0) {
$('#leftmenu').remove();
} else {
//do whatever
}
});
I don't know what you want. Please refer enter link description here to find how to check div is empty. Then if not you can add the code you want. Currently, this code is the wrong syntax. You need to fix it like
document.querySelector('.iframe-output').appendChild(
document.querySelector('.paddingbox iframe'));
$( "p:empty" )
//.text( "Was empty!" )
//.css( "margin", "0" )
.remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Has text</p>
<p></p>
<p></p>
<p>Has text</p>
Please Try this
$(document).ready(function() {
if ($('#leftmenu').length==0)
{
$('#leftmenu').remove();
} else {
document.querySelector('.iframe-output').appendChild(
document.querySelector('.paddingbox iframe')
}
});
You've got a couple of errors with your code - you're if statement is only checking a string and not actually if the empty div exists and you have a syntax error on your append (and I'm not sure you can append directly to a collection like that)
Try this (comments to what I have changed)
$(window).on("load", function() {
var $emptyDiv = $('#leftmenu:empty'); // get empty div
if ($emptyDiv.length) { // see if empty div exists
$emptyDiv.remove(); // remove empty div
} else {
$'.iframe-output').append($('.paddingbox iframe')); // you may as well use jquery append as you are using jquery
}
});
:
I'm having a problem with the syntax (or maybe with the selectors) on my code. See the demo.
I tried the following code but the results does nothing.
#1. hasAttribute():
if ($('input[type=checkbox]').hasAttribute("disabled")) {
$(this).closest('.chkbox').addClass("is-disabled");
}
#2. is():
if ($('input[type=checkbox]').is("[disabled]")) {
$(this).closest('.chkbox').addClass("is-disabled");
}
// ------------------------------------------------
if ($('input[type=checkbox]').is(":disabled")) {
$(this).closest('.chkbox').addClass("is-disabled");
}
#3. prop():
if ($('input[type=checkbox]').prop("disabled", true)) {
$(this).closest('.chkbox').addClass("is-disabled");
}
So then I think the problem is on the line:
$(this).closest('.chkbox').addClass("is-disabled");
Any idea?
Thanks.
You can use :disabled selector
see here
You're using $(this) without declaring anything. Thats the reason it's not working. It works in the second example because of the .change() function gives the context of the 'thing' (this) that is changing.
This code should work as you desire.
$(function() {
// Grab all inputs with the type checkbox.
var input = $('input[type=checkbox]')
// Check for each of the input fields (i, el stands for index, element)
input.each(function(i, el) {
// Does it have the attribute disabled?
if(el.hasAttribute('disabled')) {
// Add the class 'is-disabled'
$(el).closest('.chkbox').addClass('is-disabled')
}
})
$('input[type=checkbox]').change(function(){
if ($(this).is(":checked")) {
$(this).closest('.chkbox').addClass("is-checked");
} else {
$(this).closest('.chkbox').removeClass("is-checked");
}
});
});
I'm trying to make my links slide down over the page when the mobile nav is clicked and the content to disappear so only the links are shown. I have got this basically working but the .displayNone class will not remove when I click the mobilenav again and I'm a bit dumfounded as to why.
$(document).ready(function() {
$('#hamburger').on('click', function(){
$('.links').slideToggle(200);
var status = $('.wrapper').hasClass('.displayNone');
if(status){ $('.wrapper').removeClass('.displayNone'); }
else { $('.wrapper').addClass('displayNone'); }
});
});
Bit of newbie to all this. Anything obvious that anyone can see wrong with this?
Use toggleClass(),
$('.wrapper').toggleClass('displayNone');
And, jQuery's xxxClass() functions expect the name of the class, not the selector, so leave off the . class selector.
When adding/removing classes, just use displayNone, not .displayNone (note the dot!).
Also there's a toggleClass() function which saves you from doing the status thing, which means you just need to do
$('.wrapper').toggleClass('displayNone');
your are doing bit wrong
var status = $('.wrapper').hasClass('.displayNone');
when you use hasClass, addClass or removeClass then you don't need to have '.' dot before class name.
so correct way is
var status = $('.wrapper').hasClass('displayNone');
your code after correction
$(document).ready(function() {
$('#hamburger').on('click', function() {
$('.links').slideToggle(200);
var status = $('.wrapper').hasClass('displayNone');
if (status) {
$('.wrapper').removeClass('displayNone');
} else {
$('.wrapper').addClass('displayNone');
}
});
});
You can use :
$('.wrapper').toggleClass("displayNone");
Final code :
$(document).ready(function(){
$('#hamburger').on('click', function(){
$('.links').slideToggle(200);
$('.wrapper').toggleClass("displayNone");
})
})
I'd like to remove empty elements from some html string. I know I could run something like:
$('p').each(function(index, item) {
if($.trim($(item).text()) === "") {
$(item).remove();
}
});
The problem is that I want to remove all empty nodes - not only p. Also I want the script to consider p node in <p><span></span></p> as empty because it contains only empty elements. Do you have some simple implementation of something like that?
[EDIT]
I forgot to add: I can use jQuery but the html I want to traverse and edit is in a string - not the actual document. So how can I do this operation? I tried using var html = $.parseHTML('<p><span></span></p>') but after each loop I still get the same string...
Recently I was looking for a solution to the same problem. A recursive function was the answer.
function removeEmptyTagsRecursively($el) {
if ($el.children().length) {
$el.children().each(function(i, val) {
removeEmptyTagsRecursively($(val));
});
$el.children(':empty').remove();
}
}
Fiddle here: https://jsfiddle.net/635utakr/9/
Here's a tweek of Paul's function for vanilla JS (requires Element.matches() polyfill):
function removeEmpty(parent) {
// for each child
[].forEach.call(parent.children, function(child) {
// repeat operation
removeEmpty(child);
// remove if it matches selector
if (child.matches(':empty')) {
parent.removeChild(child);
}
});
}
Try something like
do {
empty = $("*:empty");
count = empty.length;
empty.remove();
}
while ( count > 0 );
It's iterative rather than recursive, but should do the trick
Actually Your code is working Fine. See this fiddle.
It's showing only, which having content inside. Then What you Want?
HTML
<p>hi 1</p>
<p></p>
<p><span>hi 2</span></p>
<p><span></span></p>
Script
$('p').each(function(index, item) {
if($.trim($(item).text()) === "") {
$(item).remove();
}
});
You can achieve this using below code:-
function removeEmptyTag(root) {
var $root = $(root);
$root.contents().each(function () {
if (this.nodeType === 1) {
removeEmptyTag(this);
}
});
if (!$root.is("area,base,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr") && !$root.html().trim().length) {
$root.remove();
}
}
removeEmptyTag("#divIdHere");
Fiddle
How would I select elements that have any ID? For example:
if ($(".parent a").hasId()) {
/* then do something here */
}
I, by no means, am a master at jQuery.
Like this:
var $aWithId = $('.parent a[id]');
Following OP's comment, test it like this:
if($aWithId.length) //or without using variable: if ($('.parent a[id]').length)
Will return all anchor tags inside elements with class parent which have an attribute ID specified
You can use jQuery's .is() function.
if ( $(".parent a").is("#idSelector") ) {
//Do stuff
}
It will return true if the parent anchor has #idSelector id.
You can do
document.getElementById(id) or
$(id).length > 0
You can using the following code:
if($(".parent a").attr('id')){
//do something
}
$(".parent a").each(function(i,e){
if($(e).attr('id')){
//do something and check
//if you want to break the each
//return false;
}
});
The same question is you can find here: how to check if div has id or not?
Number of .parent a elements that have an id attribute:
$('.parent a[id]').length
Simple way:
Fox example this is your html,
<div class='classname' id='your_id_name'>
</div>
Jquery code:
if($('.classname').prop('id')=='your_id_name')
{
//works your_id_name exist (true part)
}
else
{
//works your_id_name not exist (false part)
}
I seemed to have been able to solve it with:
if( $('your-selector-here').attr('id') === undefined){
console.log( 'has no ID' )
}
Pure js approach:
var elem = document.getElementsByClassName('parent');
alert(elem[0].hasAttribute('id'));
JsFiddle Demo
Simply use:
$(".parent a[id]");
You can do this:
if ($(".parent a[Id]").length > 0) {
/* then do something here */
}
You can use each() function to evalute all a tags and bind click to that specific element you clicked on. Then throw some logic with an if statement.
See fiddle here.
$('a').each(function() {
$(this).click(function() {
var el= $(this).attr('id');
if (el === 'notme') {
// do nothing or something else
} else {
$('p').toggle();
}
});
});