Is there a general way to specify elements in jquery - javascript

Is there a general way to specify elements in jQuery. For example using the $(this).find or next function.
I am trying to create a button that when copied will only activate one at a time.
At the moment when the button is duplicated output is copied.
See example.
http://jsfiddle.net/X8AYd/12/
button
<p class="vote-number">+ 70,101</p> button
<p class="vote-number">+ 70,101</p> button
<p class="vote-number">+ 70,101</p>
$(".vote-number").hide();
$(".vote-btn").click(function () {
$(".vote-number").finish().show().fadeOut(5000);
});

$(".vote-number").finish() will target all the elements with the class vote-number. Instead, you want to target only the element next to the button. So, use $(this).next(".vote-number") to target specifically.
JSFIDDLE DEMO
$(".vote-btn").click(function(){
$(this).next(".vote-number").finish().show().fadeOut(5000);
});

You can do with .next() as using .vote-btn will only target the first occurrance of the same, so better use $(this).next(".vote-number') which targets to the next <p> with class vote-number
$(".vote-btn").click(function(){
$(this).next(".vote-number").finish().show().fadeOut(5000);
});
Fiddle Example

Try This:
$(".vote-btn").click(function(){
$(this).next('.vote-number').finish().show().fadeOut(5000);
});
Working Fiddle

$(".vote-number").hide();
$(document).on("click", ".vote-btn", function (e) {
$(this).prev(".vote-number").show().fadeOut(5000);
});
Working Fiddle

Related

How to only select one multiple class with jQuery

I have a form that has checkmarks behind them. They all are tied to labels and have all the some class names. I could just make new classes or ID's for each one but figured their was an easier way to only select the checkmark that is inside that particular class?
http://jsfiddle.net/70fbLooL/
<script>
$(document).ready(function(){
$(".companyLabel").click(function(){
$(".fa-check").toggle();
$(this).toggleClass("companyLabelBackground");
});
});
</script>
$(".fa-check").toggle(); will toggle all elements with class .fa-check.
Instead, use find() to get the closest element in relation to this.
Try this:
$(document).ready(function () {
$(".companyLabel").click(function () {
$(this).find(".fa-check").toggle();
$(this).toggleClass("companyLabelBackground");
});
});
JSFiddle Demo
you can use .closest() and .find() to dynamically detect closest div or element. for example
$(this).closest('.companyLabel').find('.fa-check').toggle();
code :
$(document).ready(function(){
$(".companyLabel").click(function(){
$(this).closest('.companyLabel').find('.fa-check').toggle();
});
});
JSFIDDLE DEMO

Jquery event - how to select entire DIV excluding some inner area

Think of the following HTML code to apply Jquery:
HTML code:
<div id="outer_div">
<div id="inner_div_1"></div>
<div id="inner_div_2"></div>
<div id="inner_div_3"></div>
</div>
By default, the "outer_div" is hidden. It appears while clicked on a button using Jquery show() function.
I wanted to do the following: On click within anywhere of "outer_div" excluding the area within "inner_div_1" , the "outer_div" would again be hidden. I failed while tried the following codes. What should I amend?
Attempted Jquery 1:
$("#outer_div:not(#inner_div_1)").on("click",function(){
$("#outer_div").hide("slow");
});
Attempted Jquery 2:
$("#outer_div").not("#inner_div_1").on("click",function(){
$("#outer_div").hide("slow");
});
Your support would be highly appreciated.
You need to consider that a click in the inner div is also a click on the outter div. That being said, you just need to check the target and target parents :
$("#outer_div").on("click",function(e){
if(!$(e.target).closest('#inner_div_1').length) $("#outer_div").hide("slow");
});
You can use some of the data in the event
$("#outer_div").on("click",function(e){
if( // Fast check to see if this is the div
e.target.id !=='inner_div_1'
// We limit the 'closest()' code to the outer div. This adds children to the exclude
&& $(this).closest('#inner_div_1, #outer_div')[0].id=='outer_div'){
alert('good click');
}
});
This is a solution for your code now, this works perfect when not too many excluding objects. But no wildcard selectors, which is nice.
And a jsFiddle demo.
Other properties can be used to, like a class:
$("#outer_div").on("click",function(e){
if( e.target.className!=='even'
&& $(this).closest('.even, #outer_div')[0].id=='outer_div'){
alert('yay, clicked an odd');
}
});
I made 7 lines, gave the even ones a class 'even'.

Show/Hide a div on click

i'm writing a small script to show/hide a div when other div is clicked, but I can't get the second div clickable.
Here's my code so far:
$(document).ready(function(){
$('div#ordontia').click(function(){
$(this).next('div#ordontia2').slideToggle("slow");
});
});
http://jsfiddle.net/65AK2/1/
Every time a "button" is clicked a new div with a description should appear on the bottom of the table. (the blue div on the bottom). If another button is clicked then the previous description should close and another one should open in the same place. (not implement yet)
Thanks in advance for any help!
Why do you want to select your element with next if it has an unique ID?
$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
more general if you add more divs:
$(document).ready(function(){
$('.botaomedicina').click(function(){
$('#'+$(this).attr('id')+'2').slideToggle("slow");
});
});
with all others closing:
$(document).ready(function(){
$('.botaomedicina').click(function(){
$('.botaomedicinadescription').slideUp("slow");
$('#'+$(this).attr('id')+'2').slideToggle("slow");
});
});
Don't use $.next, it only selects siblings of the current element:
Get the immediately following sibling of each element in the set of
matched elements. If a selector is provided, it retrieves the next
sibling only if it matches that selector.
— jQuery documentation: .next()
Use the normal one:
$('div#ordontia2').slideToggle("slow");
Fixed it.
http://jsfiddle.net/65AK2/2/
firstly, it lookx like your toggled div was mal-formed. I didnt see a for it.
Secondly, if you know what the ID of the other div is, you dont need to say:
$(this).next("#item");
, it would make no sense.
$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
remove this ;)
try this
$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
updated fiddle http://jsfiddle.net/65AK2/4/
You can do it directly by an ID selector
http://jsfiddle.net/65AK2/3/
$(document).ready(function(){
$('#ordontia').click(function(){
$('#ordontia2').slideToggle("slow");
});
});

Combine after() and slideDown()

I am adding an element on a certain condition. But I don't want it suddenly appear but rather would like to slide it down. Here's how I add it:
$('.myDiv').after('<div>added content</div>');
How do I combine it with slideDown?
Try this instead :
$(".myDiv").after("<div style='display:none;'>added content</div>");
$(".myDiv").next("div").slideDown();
Good Luck !!
Try this out:
$('.myDiv').after('<div style="display:none">added content</div>').next().slideDown();
You need to use .next() on the div to which it is attached because .after()... adds the element as a sibling to the div to which it is added
Try this
$('.myDiv').after('<div style="display:none;" class="newDiv">New Content</div>');
$('.myDiv').next('.newDiv').slideDown();
first make sure the new content that you input is hidden using .newdiv{display:none;} either in your css file or inline code like: <div style="display:none;">
then use a callback function to only start after the code was inserted in the document when you used the after() method.
$('.myDiv').after('<div class="newdiv">added content</div>', function(){
$('.newdiv').slideDown();
});

using $(this) jquery to change another element

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
});

Categories