I have got a div containing some html elements. They all have a class named
class="fileItem read write".
But there could be an Element with
class="fileItem read write selected".
Now I want to get this element with the additional 'selected' tag and edit this. Currently I have an in JQuery
$(".fileItem").click(function(){
// Code
});
which detect an click on one of these fileItems.
Here I want to edit style tag of the element with 'selected' tag. So is there something where I can say get all by class and select the on with "selected"?
Just chain the desired class names like you would do in a CSS selector:
$(".fileItem.selected").click(function() {
// do stuff
});'
$(".fileItem").click(function(){
$(this).find('.selected').style('blah','blah')
});
Something like this will allow you to perform other functions as well as the selected item.
$(".fileItem").click(function(e) {
e.preventDefault();
$('.selected').css({
'color': 'green'
});
});
You can simply use this line of code to get the element with the selected class
$(".fileItem.read.write.selected").click(function() {
// code here
});'
You can use
$(".selected").click(function(){});
Use core java script to do this.
function func() {
alert("Hello, world!");
}
document.getElementsByClassName("fileItem read write selected")
[0].addEventListener("click", func, false);
As far as I know you should be able to combine the two classnames:
$(".fileItem.selected").click(function() {
//your actions
});
Related
I am trying to limit query calls using a function that will place edited items into an object then pass them to a PHP script to update only the edited information. In this case I am using jQuery's change() function, however I can not find a pseudo selector for select menu's (ie. :input, input:checkbox). The only idea I have left is to add a class to all the select menu's and go from there like so:
$(":input, input:checkbox, .selectedMenu").change(function() {
//Some Code here
});
I have checked all over and cannot find any information on this. Would this be the best way or is there an alternative?
Problem: How can you find out if any select menu has been put into focus using a pseudo selector or anything on those lines?
Select is its own tag. You don't need a psuedoselector:
$("select").change(function () { ... });
I think that all you want to do is use the select box that was changed, in this case you can do this
$(":input, input:checkbox, .selectedMenu").change(function() {
var $el = $(this);
alert($el.val());
});
you can add a focused class:
$(":input, input:checkbox, .selectedMenu").change(function() {
$(".focused").removeClass("focused");
this.addClass("focused");
//Some Code here
});
I would put this as a comment but I'm not allowed to... Maybe I misunderstood your question, but what about:
$(":input, input:checkbox, select")
I have a #myDiv And i want, when page load, ad class to #myDiv
E.G. Page load, #myDiv.class
I use this code but it's not working:
$('#sky').addClass(‘animate-in’);
$(document).ready(function(){ is called whn the doucument is ready.
and your addClass .. use single or double quotes to enclose the class ( not ‘ )..
try this...
$(document).ready(function(){
$('#sky').addClass('animate-in');
});
UPDATED
another div
<div id="anotherdiv"></div>
call the click function and the jquery selector to which u want to change the class
$('#anotherdiv').click(function(){
$('#sky').addClass('animate-in'); //or any other new class
});
go thorugh the selector jquery documentation..
http://api.jquery.com/category/selectors/
You need to use single or double quote to enclose your class.
Change
$('#sky').addClass(‘animate-in’);
To
$('#sky').addClass('animate-in');
or
$('#sky').addClass("animate-in");
you can do it like this
$(function () {
$('#sky').addClass('animate-in');
});
OR
$(function () {
$('#sky').addClass("animate-in");
});
use this code
<body onload='$("sky").addClass("animate-in")' >
Please check that already any classes are available in $("#sky") and if u want to use only 'animate-in',
Can try this,
$("#sky").attr('class','');
$("#sky").addClass('animate-in');
so that we can come to know that, already existing things are cleared and adding a new one
So, I know how to change an attribute for the same element you hover over...
$(".click2play").mouseover(function()
{
$(this).css({'visibility' : 'hidden'});
});
question Can I do the same thing but to affect another element only within the same 'click2play' div that was hovered?
maybe like?
$(".click2play").mouseover(function()
{
$(this).(#someotherdiv).css({'visibility' : 'hidden'});
});
Thanks everyone!
This code targets a div, within the current .click2play element. I believe that's what you were asking for :)
$(".click2play").mouseover(function() {
$('div.class_name', this).css({'visibility' : 'hidden'});
});
not very clear from the ques what you wanna do so ill ans for all the options i can guess of
1.if you wanna hide all the elements of class .click2Play then use
$('.click2Play').hover(function(){$('.click2play').hide()});
2.if you want to just hide the current element of all the elements having this class use
$('.click2Play').hover(function(){$(this).hide()});
3.if you wanna generalize it then you can use.selector property of the jquery object so that you would be able to use it like
$('.click2Play').hover(function(){$($(this).selector).hide()});
so now if you will change the class name from .click2Play to some other class it will work nicely and will hide all the elements of that class.
4. if you want to hide some element inside that of current element then
$('.click2Play').hover(function(){$(this).children('selector_of_child').hide()});
5.if all the elements of this class have an element inside them having some other class and you wanna hide them all then simple use each like this
$('.click2Play').hover(function(){$('.click2play').each(function(){$(this).children("selector_Of_Child").hide()})});
I would do like this:
$(".click2play").mouseover(function(){
$(this).hide();
});
But maybe it isn't what you want to do?
I suppose this :):
$(".click2play").mouseover(function(){
$(this).css({'visibility' : 'hidden'});
});
or better
$(".click2play").mouseover(function(){
$(this).hide();
});
You want to change some other div? Why would you need $(this)?
$(".click2play").mouseover(function(){
$("#someotherdiv").hide();
});
To change a single css attribute you can do:
$(".click2play").mouseover(function(){
$(this).css('visibility', 'hidden');
});
I hope it helps
(consider to see this link: http://marakana.com/bookshelf/jquery_tutorial/css_styling.html )
I believe most of the answers didn't payed attention to the question, which asks about removing a class. Here is the answer to both questions:
$('.click2play').bind('mouseenter mouseleave', function () {
$(this).removeClass('click2play'); // This line removes the current object's class click2play
$('jQUerySelector').removeClass('click2play'); // This will remove another element's class click2play
});
I am loading data dynamically by AJAX into a cluetip (http://plugins.learningjquery.com/cluetip/#).
I want to toggle the results from a link like so:
$(document).ready(function() {
$("#calendarLink").live("click",( function() {
$("#result").toggle();
}));
});
For some reason the above will not work. Can you suggest an alternative?
Couple of questions/points
Do you really need to use .live() You're using an ID selector, so there should only ever be one of these.
Also, you have an extra set of brakets. Probably not a problem, but you could remove them:
$(document).ready(function() {
$("#calendarLink").click( function() {
$("#result").toggle();
});
});
Perhaps the toggle() function isn't be used properly?
See here http://api.jquery.com/toggle/
I'm not sure if this is new functionality only for jQuery 1.4 but it appears the toggle function requires parameters.
The following code is correct (demo online - http://jsbin.com/ehate/edit):
$("#calendarLink").live("click", function(e){
$("#result").toggle();
});
You use $.live() only if #calendarLink will be added dynamically later. If it isn't, use a regular click:
$("#calendarLink").click(function(e){
$("#result").toggle();
});
If this is not working for you, be sure to check your #calendarLink and #result elements in your HTML. Make sure the ID values are correct. Mainly, be sure your casing is correct.
Two elements in the same page can't have the same id.
u used
$("#result").toggle();
'I want to toggle the results from a link ...'
So the result elements should have the same class , not id.
The code should be :
$(".result").toggle();
'#' changed into '.'
Item
After executing runstuff(), I want to use JQuery to make Item bold.
Will I need an "id"? What about "self"?
With jQuery, you ought to bind to an attribute or class on the link itself. For instance:
Click Me
$("a.makeBold").click(function(e){
e.preventDefault();
$(this).css("font-weight", "bold");
});
Of course, that's a CSS solution. You can allso wrap the element in <b> or <strong> tags:
$("a.makeBold").click(function(e){
e.preventDefault();
$(this).wrap("<strong>");
});
The A you clicked will be 'this' in your example, so just define runstuff:
function runstuff() {
jQuery(this).css("font-weight", "bold");
}
I don't know if it would bolden the text before or after runstuff() ran, but I would expect this would work:
$('a[onclick^=runstuff]').click(function(){
$(this).css("font-weight", "bold");
});
Perhaps you could ensure it would run after runstuff() by using jQuery to change the onclick attribute? Something like
$('a[onclick^=runstuff]').attrib('onclick','runstuff();boldtext();return true;');
Then you'd have to define boldtext()
You can try to modify your HTML into:
Item
And, you can have the script like:
function runstuff(link) {
jQuery(link).css("font-weight", "bold");
}