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
Related
I'm simply trying to toggle() <div class="reveal"> when the button is pushed.
I'll have multiple buttons and corresponding <div>'s on the page, so I just want to toggle() the next instance on the page using $(this).next("div.reveal").toggle();
Nothing happens and there are no errors. What did I do wrong?
HTML:
<article class="customerQuotes">
<blockquote>Blah
<cite><b>Name</b> - Company</cite>
</blockquote>
<button class="button right">More</button>
</article>
<div class="reveal">
<div class="right">
//stuff here
</div>
</div>
JS:
$(".button").click(function() {
$(this).next("div.reveal").toggle();
});
CSS:
.reveal{
display: none;
float: left;
clear: both;
}
You need to call .next on the parent element, since .reveal is its sibling.
$(".button").click(function() {
$(this).parent().next("div.reveal").toggle();
});
Thats because $(this).next("div.reveal") is undefined. There is no div.reveal next to a button element.
You would need to restructure your html like this:
<article class="customerQuotes">
<blockquote>Blah
<cite><b>Name</b> - Company</cite>
</blockquote>
<button class="button right">More</button>
<!-- Note here that div.reveal is sibling to a button so
.next() will find this element -->
<div class="reveal">
<div class="right">
//stuff here
</div>
</div>
</article>
or change your selector for JQuery to grab next reveal from the parent element like this:
$(".button").click(function() {
$(this).parent().next("div.reveal").toggle();
});
Like others said you forgot to use the next() method on the parent().
However, any time you change the structure of your HTML this code will break! Better reference the elements to be revealed explicitly. One simple way is to save the target as data on the button:
<button data-target="#reveal1" class="button right">More</button>
...
<div id="reveal1"></div>
Your JS would then look like this:
$(".button").click(function() {
$( $(this).data("target") ).toggle();
});
This will work regardless of where you place your button and div.
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).
Basically I've managed to become stuck yet again trying to duplicate a DIV and it's form elements using jQuery.
Button:
<div class="addNew" id="addSkill">Add Skill <i class="icon-plus"></i></div>
Div and contents I wish to duplicate
<div class="row" id="skiller">
<div class="label">Skill</div>
<div class="input"><input class="lineput" placeholder="Doing stuff."></div>
</div>
I've tried using the clone method, I just can't seem to create a functioning line of code that will duplicate it beneath the first div, and make it ready for PHP multiple data entry.
Thanks!
Something like this would be a start:
$("#addSkill").click(function(e){
e.preventDefault();
var new_skiller = $("#skiller").clone();
new_skiller.attr("id", "skiller-"+$(".row").length);
new_skiller.insertAfter(".row:last");
});
You need to clone and then append() the item inside a div like so:
HTML
<div class="thing">
<div class="row" id="skiller">
<div class="label">Skill</div>
<div class="input"><input class="lineput" placeholder="Doing stuff."></div>
</div>
</div>
<div class="addNew" id="addSkill">Add Skill <i class="icon-plus"></i></div>
jQuery
$(document).ready(function(){
$('#addSkill').click(function(){
var thing = $('#skiller').clone();
$('.thing').append(thing);
});
});
View the jsFiddle Demo....
Note: you'll need to give them seperate names/make it an array to access
Try this. should work. Note: ID can not be duplicated. the following code will duplicate div with id as well.
$(document).ready(function(){
$('#addSkill').click(function(e) {
var skiller = $('#skiller').clone();
$( "#skiller" ).after( skiller );
});
});
Demo:
http://jsfiddle.net/XpN95/
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>
I'm adding a click event to a span that is within a div. The target of this event, which will become visible, is a first div that is within a div, two divs down. How can I traverse the DOM to find it?
Perhaps it'll be clearer with the code:
<div a>
<h2>
<span id="here">Click</span>
</h2>
</div>
<div></div>
<div>
<div class="targetDiv">This is the div we need to find</div>
<div class="targetDiv">There are other divs with the same id, but we don't need to find those</div>
<div class="targetDiv">Not looking for this one </div>
<div class="targetDiv">Or this one either</div>
</div>
I've searched left and right and cannot find an answer. It's important to restrict the event ONLY to the first div immediately after the span.
Any help would be much appreciated.
As shown, the code would look like this:
$('span#here').on('click', function() {
$(this).closest('div').siblings(':contains(.targetDiv)').children().eq(0).show();
}
Here's a sample of the fish we caught
$(function() {
$('#here').on('click', function() {
var div = $(this) //the element clicked
.closest('div') //find nearest parent div
.nextAll(':eq(1)') //find the second next div
.children(':eq(0)') //find the first child of it
.show(); //remove invisible cloak
});
});
This works. I provided an example you can just save to a html file and test it yourself
<style>
.targetDiv{display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#here').click(function(){
$('.targetDiv').first().show(); // or whatever you want
});
});
</script>
<div a>
<h2>
<span id="here">Click</span>
</h2>
</div>
<div></div>
<div>
<div class="targetDiv">This is the div we need to find</div>
<div class="targetDiv">There are other divs with the same id, but we don't need to find those</div>
<div class="targetDiv">Not looking for this one </div>
<div class="targetDiv">Or this one either</div>
</div>