jQuery .not() selector not working with class [closed] - javascript

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I'm trying to select all of the direct children of body, except for those that match a certain class.
Whether I use the .not() filter or the :not() selector, the element I'm trying to filter out is STILL part of the selection when I filter by class name. However, if I try to filter it out based on its id, it works fine.
Here are the selectors:
console.log( $( 'body > *' ).not( '.fullscreen, script' ) ); // div.fullscreen is STILL part of the selection
console.log( $( 'body > *' ).not( '#searchWindow, script' ) ); // div.fullscreen is gone, like I wanted
console.log( $( 'body > *:not(.fullscreen, script)' ) ); // div.fullscreen is STILL part of the selection
console.log( $( 'body > *:not(#searchWindow, script)' ) ); // div.fullscreen is gone, like I wanted
How come the class selector is without effect in this situation?
Here is a jsfiddle of it.

You've spelt fullscreen wrong in your HTML. It has three l's in it.
See here:
<div id="searchWindow" class="fulllscreen">
Fixed Demo

Related

Why won't my delete button work? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I have some background in computer programming, but I am just getting into Javascript and jQuery. I have this code that will delete the element's grandparent but the function isn't running at all ("I am not seeing the "alert".) Can you help me find out what is wrong?
NOTE: There are multiple .trashbuttons and I just want the .trashbutton being clicked's grandparent getting deleted.
$("trashbutton").click(function() {
this.parent().parent().remove();
})
EDIT: The answers I have been given are not working. I should also note that the .trashbutton is a img. If that helps.
You have an error in your selector, you forgot the . to select css classes.
And wrap this to $().
try
$(".trashbutton").click(function() {
$(this).parent().parent().remove();
})
I suggests you to keep reading on jQuery and javascript, especially this documentation about jquery selector. Your script function properly, except that $("trashbutton") refer to a <trashbutton></trashbutton> tag, that doesnt exist in your code ( i guess ). If you wanted to target an element class with that use $(".trashbutton") or $("#trashbutton") to target an element with this ID :)
Use $(this)...this will represent DOM element but you need jQuery wrapped element.
Try this:
$(".trashbutton").click(function() {
$(this).parent().parent().remove();
})
Edit: As suggested in comments, make sure you have $("trashbutton") as valid selector..I assume you are dealing with classes hence it should be $(".trashbutton")
You should use #trashbutton if it is an id or .trashbutton if it is a class. Also wrap this as $(this).
$("#trashbutton").click(function() {
$(this).parent().parent().remove();
})

Toggle class on and off in jquery with button [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I'm new to javascript but I'm having a hard time toggle this class on and off.
https://jsfiddle.net/spadez/o2s0hmtv/2/
$( "#togglebtn" ).click(function() {
$(.mynav).toggleClass( "modal" );
});
Based on tutorials this should work, but the button doesn't seem to do anything. Can anyone show me where I went wrong please?
$( "#togglebtn" ).click(function() {
$(".mynav").toggleClass( "modal" );
});
Its just typo. Jquery selectors should be enclosed in '(single quotes) or "(double quotes) .
https://jsfiddle.net/o2s0hmtv/4/
$( "#togglebtn" ).click(function() {
$('.mynav').toggleClass( "modal" );
});
You need quotes around selectors (.mynav) here. Like this:
$( "#togglebtn" ).click(function() {
$('.mynav').toggleClass("modal");
});

Access $(this) element inside .load() function [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I'm trying to remove loader icon from images after they have been loaded. In order to do that, I need to access $(this) but I cannot access the image element and remove js-image-loading class.
variable html contains dynamic HTML contents fetched via ajax.
$(html).find('img').load(function() {
$(this).removeClass("js-image-loading"); //ok image is done loading, remove icon
});
Is this possible to do?
You forgot to quote to the html selector $(html) should be $('html') but I suggest you to use *:
$('*').find('img').load(function() {
$(this).removeClass("js-image-loading");
});
Or, simply $('img').load()
try
$("html").find('img').load(function () {
$(this).removeClass("js-image-loading"); //ok image is done loading, remove icon
});
OR
$('img').load(function () {
$(this).removeClass("js-image-loading"); //ok image is done loading, remove icon
});
NOTE: html is string not object
DEMO

How to make JQuery's droppable element to accept one and just one draggable element from a bunch of them? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I have a project, is like a calendar to make appoinments for diferent doctors in a hospital. I have a table and in each "td" is a droppable element. I have some "div's" whose are draggable elements. What I want to do is to drag elements to the droppables, but not having more han one per "td". The divs have different classes because they're in different color. Than you!
Based on the limited information about your particular case, here's a suggestion:
Once a draggable is dropped onto the droppable, remove the ability for both the draggable and droppable to be futher dragged and dropped in the drop event:
http://jsfiddle.net/96ecc/
$(function() {
$( ".draggable" ).draggable();
$( ".droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
$(this).droppable( "destroy" );
event.ui.draggable("destory");
}
});
});

JQuery not hitting when using secondary class as selector [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
(Code below) Trying to get a hover effect on the text in a div. Using class selectors in JQuery and it's not hitting when I use $('.abc') but does work when I use $('#top-nav-1') - not sure why it can't be hit when I select it by the secondary class. I can go through and use all the ids, but I'd rather just use one class - after all, that's what they're for!
Thanks, in advance, for the input on this.
HTML:
<div id="top-nav-1" class-"container abc">The Text</div>
CSS:
.container {
color: black;
}
JQuery:
$('.abc').hover(function() {
$(this).css('color','red');
});
fiddle: http://jsfiddle.net/yB9Jq/
You have a typo: class=, not class- (= not -).
Also, jQuery's .hover() takes two functions as arguments:
.hover( handlerIn(eventObject), handlerOut(eventObject) )
So an example would be:
$('.abc').hover(
function() {
$(this).css('color','red');
},
function() {
$(this).css('color','');
}
);
Your fiddle, updated.
Your markup is incorrect. You need to have class="container abc" instead of class-"container abc"
<div id="top-nav-1" class="container abc">The Text</div>
http://jsfiddle.net/yB9Jq/1/

Categories