Develop Reference

How do I select one element out of a class with jQuery?

I have multiple rows and in each row is a span which is set to transparent:
span {
color: transparent;
}
Now upon the hover of a row, I set the span to be visible by adding the following jQuery:
$('.single-row').hover(function(){
$('span').css("color", "#999");
}, function() {
$('span').css("color", "transparent");
}
);
However, this effects every row at once rather than the specific row being hovered over.. what syntax do use to effect the specific row being hovered over rather than each row without using id's?

You can do it using $(this).find('span') to select a span inside current hovered row
$('.single-row').hover(function(){
$(this).find('span').css("color", "#999");
}, function() {
$(this).find('span').css("color", "transparent");
}
);
Or use a shortcut $('span',this)
$('.single-row').hover(function(){
$('span',this).css("color", "#999");
}, function() {
$('span',this).css("color", "transparent");
}
);

The javascript method in the currently-accepted answer will work fine (provided the bug mentioned in comments is fixed) -- but just for completeness, a pure CSS version of this would be
.single-row span {color: transparent}
.single-row:hover span {color: #999}

Add class on div mouse enter mouse leave and click

What i am trying to achieve is, i want to make it work like star rating. When you enter mouse star becomes yellow, when you leave mouse it turns gray and then if you click it again becomes yellow.
Not getting how to achieve it, I have added code to show you what i have tried so far.
JSfiddle
$(".na").hover(
function () {
$(this).addClass("clickstar");
},
function () {
$(this).removeClass("clickstar");
}
);
$(".na").on("click",function(){
$(this).toggleClass("clickstar");
});
.clickstar{
background: #00A1EF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="na" style="border:1px solid #c0c0c0;border-radius:50%;width:115px;height:115px;display:inline-table;margin-right:5px;"></div>

You should consider using 2 different classes, .hoverstar and .clickstar, then :
http://jsfiddle.net/xLxbw216/1/
You would have one class for each case, which seems more logical ?
You can also make it simpler by removing .hover() method, and do it with CSS :
http://jsfiddle.net/xLxbw216/8/
I probably choose the second one, even if the first solution seems to be more "readable".

You can do it like this:
$(".na").on("click",function(){
$(this).toggleClass("clickstar");
});
Fiddle Example

You should use a different class for permanent start and hover star
I have created a working example in JSfiddle
$(".na").hover(
function () {
var $this = $(this);
if (!$this.hasClass("permstar")) {
$this.addClass("clickstar");
}
},
function () {
var $this = $(this);
if (!$this.hasClass("permstar")) {
$(this).removeClass("clickstar");
}
}
);
$(".na").on("click",function(){
$(this).toggleClass("permstar");
});

add/remove class on hover events was conflicting with on click event, so i have moved the hover functionality to css
css:
.clickstar{
background: #00A1EF;
}
.na:hover{
background: #00A1EF;
}
live demo:
http://jsfiddle.net/dreamweiver/xLxbw216/7/
Happy Coding :)

jquery/javascript - how to "undo" a click event using if statement?

The below code takes into account different tags and turns the background red if the tag is clicked on. I want to code it so that if it is clicked on again, it changes back from red and 'deletes' the background, or at least set it to null. I have tried an if statement to no avail. I know that I can just make another click event that changes the background to white, but this is for experimental purposes and i was wondering if this CAN be done with if statements. thanks to ya.
<script>
$(document).ready(function() {
$("p, h1").click(function() {
$(this).css("background-color", "red");
if ($(this).css("background-color", "red")) {
$(this).css("background-color", "null");
}
});
});
</script>

First you need to use the getter version of .css() like
if($(this).css("background-color") == "red"){
but it still won't work because, the css getter will return a rgb format value and will return non consistent values across browsers.
So the solution is to use a css based solution using toggleClass()
.red {
background-color: red;
}
then
$(document).ready(function() {
$("p, h1").click(function() {
$(this).toggleClass("red");
});
});
Demo: Fiddle

$('p, h1').click(function() {
var $this = $(this);
var altColor = $this.data('altColor');
$this.css('background-color', altColor ? '' : 'red');
$this.data('altColor', ! altColor);
});
This answers your question, but you should really be using a CSS class for this.

This is easily done using CSS, and is a bit more straight forward. If you create a CSS class for the click, then you can just toggle it on/off each time the item is clicked:
CSS
p, h1 {
background-color: none;
}
p.red, p.h1 {
background-color: red;
}
JavaScript:
$('p, h1').click(function() {
$(this).toggleClass('red');
});

jQuery UI Sortable on Click

I have the jQuery UI sorting functionality working fine, but I would also like to add in a basic click action to cause the draggable items to change <ul>. I have the <div class="click_area"> disabled from dragging. What I would like is in the first <ul> if the click_area is clicked then the sortable <li> would move to the second <ul> just as if I had dragged it over. Same deal if the click_area is clicked in the second <ul> it will be moved to the first <ul>. I have created a JS Fiddle for testing: http://jsfiddle.net/helpinspireme/wMnsa/
Any suggestions would be greatly appreciated. Thanks.

$("#unassigned_list, #recipients_list").sortable({
connectWith: ".connected_sortable",
items: "li",
handle: ".draggable_area",
stop: function(event, ui) {
updateLi(ui.item);
}
}).disableSelection().on("click", ".click_area", function() {
// First figure out which list the clicked element is NOT in...
var otherUL = $("#unassigned_list, #recipients_list").not($(this).closest("ul"));
var li = $(this).closest("li");
// Move the li to the other list. prependTo() can also be used instead of appendTo().
li.detach().appendTo(otherUL);
// Finally, switch the class on the li, and change the arrow's direction.
updateLi(li);
});
function updateLi(li) {
var clickArea = li.find(".click_area");
if (li.closest("ul").is("#recipients_list")) {
li.removeClass("ui-state-default").addClass("ui-state-highlight");
clickArea.html('←');
} else {
li.removeClass("ui-state-highlight").addClass("ui-state-default");
clickArea.html('→');
}
}
​

Here is a starting place for you,
.on('click', '.click_area', function(){
$(this).parent().appendTo($("#unassigned, recipients").not($(this).closest("ul")));
})
The trick being that the click handler is on the parent container not the individual children, so when they are moved you don't need to keep managing their handlers.
All you need to do is update the stylings.
jsFiddle

Restoring elements style using jquery

Say I have the following css:
.cls {}
.cls ul {list-style-type:none;}
.cls ul li
{
border-color:#ff0000;
border-style:solid;
float:left;
padding:0px 20px 0px 2px;
border-left-width:1px;
border-bottom-width:0px;
border-top-width:0px;
border-right-width:0px;
}
I assign the class "cls" to a <div> as follows:
<div class="cls">
<ul>
<li id="foo">Foo</li>
<li id="bar">Bar</li>
</ul>
</div>
If I manipulate element properties using jquery, say I change the border-left-color on the "bar" listitem as follows:
$("#bar").css("border-left-color", "#0000ff");
Is there a "jquery way" to RESTORE the properties that the listitem "bar" had inherited when the containing <div> was initially assigned the class "cls"?
Obviously without having to do:
$("#bar").css("border-left-color", "#ffff00"); }.
Something in the form of, $().restoreClass() or equivalent???

Define a new class
.blueBorder {
border-left-color: #0000ff;
}
Then you can toggle the style with
$("#bar").toggleClass('blueBorder'); // with blue border
$("#bar").toggleClass('blueBorder'); // without blue border
$("#bar").toggleClass('blueBorder'); // with blue border
This is the best way to toggle style. Keep in mind that you can apply more than one class to a single HTML element, so that you can combine styles together. For example
$("#bar").toggleClass('blueBorder'); // with blue border
$("#bar").toggleClass('redBackground'); // with blue border and red background
$("#bar").toggleClass('blueBorder'); // with red background
You should keep your presentation (css) separated from the behavior (js), so the following is not recommended:
$("#bar").css("border-left-color", "#0000ff");
Imagine the work you will have, if you write this a thousand times and later your customer decides to change it to yellow.
Demo here

$("#bar").css("border-left-color", "");

When you use .css it adds a style attribute to the element. As long as there was not a style attribute when the page was rendered, calling $().removeAttr('style') should do what you want.
JsFiddle Example

Try: $("#bar").removeAttr('style')

You can get the particular CSS property and store it in a string.
Then you can restore it when you are done with the change.
But you have to be careful with the name of CSS property :
Here it is working:
http://jsfiddle.net/KgEjr/4/
var myOriginal = "" ;
$('#st').click(
function() { storeAndChange(); } );
$('#re').click(
function() { restore(); } );
function storeAndChange()
{
myOriginal = $("#bar").css("border-left-color");
$("#bar").css("border-left-color", "#0000ff");
$("#msg").text("changed");
}
function restore()
{
$("#bar").css("border-left-color", myOriginal);
$("#msg").text("restored");
}

Could you store the style in a data attribute and recover it later? This seems to work with your example.
$(function(){
$(".cls ul li").each(function(){
$(this).data("defaultStyle",$(this).attr("style") || "");
});
$("#foo").css({"border-left-color": "#ff00ff", "font-style": "italic", "background-color": "#efefef"});
$("#bar").css({"border-left-color": "#0000ff", "font-weight": "bold", "background-color": "#cdcdcd"});
$(".cls ul li").click(function(){
$(this).attr("style", $(this).data("defaultStyle"));
});
});