accessing an element of a class in jquery not working - javascript

I want to access different id's (with same name) using $this in jquery, but its not working.
I want when a superhero is clicked only his friend and he himself change their class only.
<!DOCTYPE html>
<html>
<head>
<title>Try jQuery 2.0.0 Online</title>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
$(document).ready(function() {
$('.shikhar').click(function(){
$(this).find('#a').click(function(){
$(this).find('#b').addClass("selected");
$(this).find('#a').addClass("highlight");
});
$(this).find('#b').click(function(){
$(this).find('#a').addClass("selected");
$(this).find('#b').addClass("highlight");
});
});
});
</script>
<style>
.selected {
color:red;
}
.highlight {
background:yellow;
}
</style>
</head>
<body>
<div class="shikhar">
<div id="a">Spiderman</div>
<div id="b">Hulk</div>
</div>
<div class="shikhar">
<div id="a">Superman</div>
<div id="b">Batman</div>
</div>
</body>
</html>

ID attributes must be unique. JavaScript stops searching as soon as it finds the first element with a matching ID. Simply change those IDs into classes instead:
<div class="a">Spiderman</div>
...
<div class="a">Superman</div>
Then change your jQuery selectors to $('.a') and $('.b') instead:
$(this).find('.a').click(function(){
$(this).find('.b').addClass("selected");
$(this).find('.a').addClass("highlight");
});

You have duplicate ids. IDs should be unique. You can use the markup:
<div class="shikhar">
<div class="a">Spiderman</div>
<div class="b">Hulk</div>
</div>
<div class="shikhar">
<div class="a">Superman</div>
<div class="b">Batman</div>
</div>
And JS:
$('.shikhar').click(function(){
$(this).find('.a').click(function(){
$(this).next().addClass("selected");
$(this).addClass("highlight");
});
$(this).find('.b').click(function(){
$(this).prev().addClass("selected");
$(this).addClass("highlight");
});
});

you cant use the same ID for different elements. use ID for only one element.
HTML:
<div class="shikhar">
<div class="a">Spiderman</div>
<div class="b">Hulk</div>
</div>
<div class="shikhar">
<div class="a">Superman</div>
<div class="b">Batman</div>
</div>
jQuery:
$('.shikhar').each(function(){
$(this).on('click','.a, .b',function(){
$(this).closest('.shikhar').children().removeClass('selected highlight');
$(this).addClass('selected');
$(this).siblings().addClass('highlight');
});
});
Fiddle:
http://jsfiddle.net/me2DE/

Try this:
$(document).ready(function() {
$('.shikhar >').click(function(){
$(this).addClass("highlight");
$(this).siblings('div').addClass("selected");
});
});

Here is your answer: http://jsfiddle.net/S5rbz/ But it's wrong to have more items with the same id value on the same page. So replace the id's with class values.Later edit: also, I think you want to remove the existing class, for each children, and add the new class, as if you keep adding the classes, they will be overwritten by the last named class(also keep in mind the cascading rule declarations).

Related

jQuery - select child of child of element

I want to select the second div-child of the first div-child of a form.
If I have this html:
<form id="hello"></form>
<form method="get">
<p class="search-box"></p>
<div class="tablenav top">
<div class="alignleft actions bulkactions"> </div>
<div class="alignleft actions"></div>
<div class='tablenav-pages one-page'></div>
</div>
</form>
<div class="tablenav bottom"></div>
..I want to select the second child div of the "tablenav top" div inside the form. And then insert a div next to it.
This is apparently wrong:
jQuery(document).ready(function($) {
$("form div:first-child div:nth-child(2)").after("<div class='alignleft actions'><p>New div!</p></div>");
});
edit: I should have specified a few more things - the very first form is inside a hidden div, and the form itself contains a few divs. And the last div also contains a few divs. Apparently this affects what sort of code will work.
Try this
jQuery(document).ready(function($) {
$($("form .tablenav .alignleft")[1]).after("<div class='alignleft actions'><p>New div!</p></div>");
});
Edit: Using eq(1) to get the second element in the array of jQuery objects is a much cleaner way.
jQuery(document).ready(function($) {
$("form .tablenav .alignleft").eq(1).after("<div class='alignleft actions'><p>New div!</p></div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="hello"></form>
<form method="get">
<p class="search-box"></p>
<div class="tablenav top">
<div class="alignleft actions bulkactions"> </div>
<div class="alignleft actions"></div>
<div class='tablenav-pages one-page'></div>
</div>
</form>
<div class="tablenav bottom"></div>
You need to use :first as the :first-child looks at all elements within the container, not just the div specified. Also note that nth-child indexes are 1-based, so the div you're looking for is actually nth-child(3). Try this:
$("form div:first div:nth-child(3)").after("<div class='alignleft actions'><p>New div!</p></div>");
Example fiddle
This works for me:
jQuery(document).ready(function($) {
$("form .tablenav > div:nth-child(2)").after("<div class='alignleft actions'><p>New div!</p></div>");
});
Check out this
fiddle.
Try this.
$( ".tablenav.top div:nth-child(2)" ).after(your code..)
$("form .tablenav > div:first div:nth-child(2)").after("<div class='alignleft actions'><p>New div!</p></div>");
worked for me

Executing a condition if either item is clicked

I have the following function:
$('.card1').click(function(){
// ...
});
I want to avoid repetition and would want this function to execute for any of the following selectors: $('.card1'), $('.card2'), $('.card3'), $('.card4'), $('.card5'), $('.card6'), $('.card7'), $('.card8')
Maybe have an if condition, where if this is clicked or that, but not sure.
You should convert those classes to id or ad id for those tags then easily you can find which tag is clicked you can see example here
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
var cardnumber = ["#card1", "#card2", "#card3", "#card4", "#card5"];
$("#card1, #card2, #card3, #card4, #card5").click(function() {
var y = cardnumber.indexOf("#" + this.id);
alert(y);
});
});
</script>
</head>
<body>
<p id="card1">Click me!</p>
<p id="card2">Click me!</p>
<p id="card3">Click me!</p>
<p id="card4">Click me!</p>
<p id="card5">Click me!</p>
</body>
</html>
Either use a common class for all the elements :
$('.card')
or make a group selector:
$('.card1, .card2....n')
You can try to match elements that have class 'card' starts with 'card', like this $("div[class^='card'],div[class*=' card']").click(function(){...});
Try using Attribute Starts With Selector [name^="value"]
$("[class^=card]").click(function() {})
better to introduce a new css class for the click
CSS
/*all cards*/
.card {...}
/*personalized cards*/
.card1 {...}
.card2 {...}
.....ect
javascript
$('.card').click(function(){
// ...
});
html
<div class="card card1">card1</div>
<div class="card card2">card2</div>
<div class="card card3">card3</div>
<div class="card card4">card4</div>
Hope that makes sense to you or at least gives you ideas.
You would then made the specify class --> ids depending on whether they are repeated or not.
<div id="card1" class="card">card1</div>
<div id="card2" class="card>card2</div>
<div id="card3" class="card">card3</div>
<div id="card4" class="card">card4</div>
you would then need to change the CSS to accommodate this change.
Then you would get the card number by asking for the Id in the javascript.
javascript
$('.card').click(function(){
var $this = $("this");
var cardId = $this.attr("id");
if(cardid == "card1") {
//your code
} else if(cardid == "card2") {
//your code
}
});

jQuery - Find first div with specific ID inside a Div?

So my code always follows the same kind of format:
<div id="container">
<div id="firstDiv">
</div>
</div>
Sometimes it's like this (and this is what I want to ignore):
<div id="container">
<div id="banner">
</div>
<div id="firstDiv">
</div>
</div>
So what I want to do is
IF the first div inside #container is equal to #firstDiv - add a banner. else (there's already a banner there) do nothing.
Any help with this would be great!!
Thanks!!
You can do that:
if($('#container > div:first').attr('id') == 'banner') {
//banner exists
} else {
//banner not exists
}
Use a child selector:
div#container > div#firstDiv
You can
$('#firstDiv:first-child').before('<div class="banner">banner</div>');
$('#firstDiv2:first-child').before('<div class="banner">banner</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div id="firstDiv">Div</div>
</div>
<div id="container2">
<div id="banner">Banner</div>
<div id="firstDiv2">Div</div>
</div>
Try this:
if($("#container").find("#banner").lenght == 0){
// You have the banner
}else{
// you dont`n have the banner
}
try this:
(function(){
if(!$('#firstDiv','#container').length){
$('#container').prepend(jQuery('<div id="firstDiv">'));
}
})(jQuery);
With the children() selector you get all the children element of #container.
With the first() you get the first one, and with attr('id') you get the id name.
Then you just have to check what id name you have
Example:
if($("#container").children().first().attr('id') != "banner"){
addBanner();
}

JS Target a class directly above element

i'm trying to use jQuery to add/remove a class to an element but I only want to target the '.content' class that is directly above the '.trigger' essentially making each work independently of each other.
Any ideas on the best way to do this?
Thanks in advance
HTML
<div class="instance">
<span class="content showHide">this is hidden</span>
trigger
</div>
<br />
<div class="instance">
<span class="content showHide">this is hidden</span>
trigger
</div>
<br />
<div class="instance">
<span class="content showHide">this is hidden</span>
trigger
</div>
CSS
<style type="text/css">
.showHide{
display: none;
}
</style>
JS
<script type="text/javascript">
$(document).ready(function(){
$('.instance a.trigger').click(function(){
$('span.content').toggleClass('showHide');
});
});
</script>
Try using .prev() that will only target the .content element which is a immediately preceding sibling of your .trigger element:
$(document).ready(function(){
$('.instance a.trigger').click(function(){
$(this).prev('span.content').toggleClass('showHide');
});
});
You could also use siblings(). It will only target everything in the same container
$(document).ready(function(){
$('.instance a.trigger').click(function(){
$(this).siblings('span.content').toggleClass('showHide');
});
});
Fiddle
This method will allow the .content to be anywhere in the container, whether it is before or after the .trigger

How to append text after last css class

I have the following html
<div class="someClass">
Some text
</div>
<div class="someClass">
Some other text
</div>
<div class="add>
<img src="someImage.jpg">
</div>
Now I'd like to append another div after a click on the add image - but only after the last div with the class "someClass".
If I use the following jQuery it will be appended after each someClass element, so multiple times.
$(".add img").live("click", function() {
$(".containerFooter").after("<div class='someClass'>test</div>");
});
Is there a way to only append it after the last div with the someClass attribute?
You are looking for the :last selector:
$(".someClass:last").after("<div class='someClass'>test</div>");
$('.someClass').last()
OR
$('.someClass:last')
will give you last element of class someclass
Use:
$(".someClass").last().append("<div class='someClass'>test</div>");
$(".add img").live("click", function() {
$(".someClass:last").after("<div class='someClass'>test</div>");
});
Sorry, dint read the question completely in first attempt, updated the ans!
Also your html has a typo , its make it
working demo
$(".someClass").last() //-> selects your last div with id = someClass
.after("<div class='someClass'>test</div>");//-> place the html after the selected div
Actual code below
$(".add").live("click", function(){
$(".someClass").last().after("<div class='someClass'>test</div>");
});
​
​
There may be an easier way, but a jquery class returns an array of applicable objects. So you can find the last such object, create a new jquery object from it, and then operate on that.
<html><title>JQuery Play</title>
<h1>JQuery Play</h1>
<script src="jquery-1.4.1.js" type="text/javascript" ></script>
<script type="text/javascript">
function add()
{
var x=$(".someClass");
$(x[x.length-1]).after("Added text");
}
</script>
<div class="someClass">
Some text
</div>
<div class="someClass">
Some other text
</div>
<div class="add">
<button onclick="add()">Add</button>
</div>
</html>

Categories

Resources