I'm wondering how to get the index of a figure tag inside a particular wrapper relative to that wrapper. I've prepared an exemple here: http://jsfiddle.net/vhyfwbjm/ (or see below)
The wrapper #wrapper contains three figure tags differently nested. I would like to get the index() relative to #wrapper.
Any ideas ?
<div id="wrapper">
<p>
<figure>
<img src="#" />
</figure>
<div class="another-wrapper">
<figure>
<img src="#" />
</figure>
<div class="another-wrapper">
<figure>
<img src="#" />
</figure>
</div>
</div>
</p>
</div>
You can simply ask for the index inside #wrapper:
$('figure').on('click', function() {
console.log( $('#wrapper').find('figure').index( this ) );
});
You select the collection of elements you want to look through (.find('figure')) then ask for the index of a specific element (this refers to the clicked figure, here).
You can also pass in another jQuery selector as your index-element:
<figure id="myFigure"></figure>
...
console.log( $('#wrapper').find('figure').index( $('#myFigure') ) );
Try this : Find all the figure tag inside wrapper and iterate them.
$(function(){
$('#wrapper').find('figure').each(function(index){
alert(index);
});
});
Demo
You can use .index() with parameter. Read here
$("figure").click(function(){
var figureElements=$("#wrapper").find("figure");
alert(figureElements.index(this));
});
Demo
Related
code is like this
<div class="linkPillar">
<img src="github.png" alt="GitHub">
<img src="fb.png" alt="facebook">
</div>
and i want to select all a's just inside of linkPillar without giving each of them an id. is there any way to make this, thanks
You can use the query selector to find the elements:
console.log(document.querySelectorAll('.linkPillar a'));
<div class="linkPillar">
<img src="github.png" alt="GitHub">
<img src="fb.png" alt="facebook">
</div>
You can use getElementsByClassName() method to return a collection of all elements in the document with the class name "linkPillar" and then use querySelectorAll to fetch all of the a tag elements within that element.
var aTags = document.getElementsByClassName("linkPillar")[0].querySelectorAll("a");
console.log(aTags);
<div class="linkPillar">
<img src="github.png" alt="GitHub">
<img src="fb.png" alt="facebook">
</div>
<div class="e1">
<p><img alt="" src="/images/site/pr1.png" /></p>
</div>
<div class="e1">
<p><img alt="" src="/images/site/pr2.png" /></p>
</div>
<div class="e1">
<h1> My new h1 </h1>
</div>
How is it possibe to take the content of img src element of the first two div tag which class e1?
Simply use the querySelectorAll method on document. You can then map the returned NodeList to an array of src attributes.
var images = document.querySelectorAll('.e1 img[src]'),
sources = Array.prototype.map.call(images, function(img) {
return img.src;
});
I've used the above selector '.e1 img[src]' to make sure that the returned NodeList only has images with src attributes.
JSFiddle Demo ~ http://jsfiddle.net/u9Lkada3/1/
Don't forget! You need to run the script after the elements exist in the document. The easiest way to ensure this is to put your script at the end, just before the closing </body> tag.
I have one div "upload" where various images are displayed and each image has an remove option which if clicked on hides the image.
I need to show the particular hidden images in below deleted section.
HTML
<div id="upload">
<a href="javascript:void(0);" onclick= remove()> Remove </a>
<img src="pic1.jpg">
</div>
<div id="deleted">
</div>
JS
function remove(){
$("upload").hide();
}
If I click on remove option in div "upload" then I need to hide that image and simultaneously show that image in div "deleted".
I've done some changes your original code.
HTML
<div id="upload">
<a>Remove</a> <img src="pic1.jpg" />
<a>Remove</a> <img src="pic2.jpg" />
<!-- etc. -->
</div>
<div id="deleted"></div>
JS (with jQuery)
$(function() {
$("#upload a").click(function(e) {
$(this).next("img").appendTo($("#deleted"));
$(this).remove();
});
});
By using jQuery, you can dynamically bind the click event to every a inside #upload. Then, relatively to the clicked a, find the next img, append it to #deleted (with appendTo), and finally delete the clicked a.
Here I have a sample JSFiddle http://jsfiddle.net/x3f6L9re/ with a demonstration how the problem can be solved.
Since you're intending to use jQuery, please don't add the function call in the HTML.
This line:
<a href="javascript:void(0);" onclick= remove()> Remove </a>
is thus obsolete. I used the tag button instead of a, which fits better here.
My code would be:
HTML
<div id="upload">
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/524px-JQuery_logo.svg.png" alt="Image">
</figure>
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Crystal_source.png" alt="Image">
</figure>
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/AngularJS_logo.svg/695px-AngularJS_logo.svg.png" alt="Image">
</figure>
</div>
<div id="deleted">
</div>
I enclosed every image in a tag figure for better demarcation.
CSS
#upload, #deleted, figure {
border: thin solid black;
}
Adding border for visualisation of the effects.
And here is the jQuery:
JavaScript
$('button').click(function () {
$('#deleted').append($(this).next());
$(this).next().hide();
$(this).hide();
$(this).parent().css('border', 'none');
});
When a button is clicked its next sibling, which is the image, is appended to the div with id="deleted". Then the next sibling of the button, the image, is hidden, together with the button itself. For cosmetical purposes the border of the parent element - figure - is removed.
You can further enhance the code.
follow the below steps
<div id="upload">
Remove
<img src="pic1.png"/>
</div>
<div id="deleted">
</div>
Javascript part
$(document).ready(function() {
$("#removebutton").click(function() {
$("#deleted").html($("#upload").find("img"));
});
});
Check this working fiddle http://jsfiddle.net/zzpgn6zr/
Let me know if it is helpful
I have the following block of HTML code more than once
<div id="page_1" class="page">
<div class="imageDetail_bg">
<img src="../_img/detail_car.jpg" alt="" id="car_detail" class="car_detail"/>
</div><!-- imageDetail-->
<div id="listThumbs">
<div id="thumbsContainer_1" class="thumbsContainer">
<div id="areaThumb" class="areaThumb">
<div id="posThumb_1" class="posThumb">
<img src="../_img/detail_car.jpg" class="detail_img" alt="">
</div>
</div><!--areaThumb-->
<div id="areaThumb" class="areaThumb">
<div id="posThumb_2" class="posThumb">
<img src="../_img/detail_car.jpg" class="detail_img" alt="" />
</div>
</div><!--areaThumb-->
...
...
...
</div><!--listThumbs-->
</div><!--page-->
and the following jQuery code:
$('.page').each(function(i) {
$('.areaThumb').each(function(j) {
$('.detail_img').eq(j).click(function(){
$('.car_detail').eq(i).attr('src', $(this).attr('src'));
});
});
});
What I want to do is: For each page there's a block of thumbs, and when I click in any thumb, the image in #car_detail is replaced by the image of the thumb I clicked. At this moment I can do this, BUT the #car_detail image is replaced in all pages. I'm not getting individually actions for each page. Every click make the action occurs in all pages.
Can anyone tell me what I'm doing wrong?
Thanks
You need not iterate through each element of the jquery selector result to bind a click event.
And you are missing a closing div for thumbsContainer div, add that before each .
Also if you have an element with id car_detail then you should use #car_detail instead of .car_detail
Working example # http://jsfiddle.net/2ZQ6b/
Try this:
$(".page .areaThumb .detail_img").click(function(){
$(this).closest("div.page").find('.car_detail').attr("src", this.src);
});
If the .detail_img elements are being used for the car_detail image then you can simplify the above code to:
$(".detail_img").click(function(){
$(this).closest("div.page").find('.car_detail').attr("src", this.src);
});
You need to give context to your children nodes:
$('.page').each(function(i) {
$('.areaThumb', this).each(function(j) {
$('.detail_img', this).eq(j).click(function(){
$('.car_detail', this).eq(i).attr('src', $(this).attr('src'));
});
});
});
Every this is pointing to the current element given by the jquery function that called it.
[edit] Cybernate found a better way to do what you wanted to. My answer mostly explains why your code did not work as you wanted
I think you have the wrong approach about this,
You should just use cloning and you will be fine...
HTML
<div class="holder">Replace Me</div>
<div>
<div class="car"><img src="img1" /></div>
<div class="car"><img src="img2" /></div>
</div>
JS
$('.car').click(function(){//when you click the .car div or <img/>
var get_car = $(this).clone();//copy .car and clone it and it's children
$('.holder').html('').append(get_car);//put the clone to the holder div...
});
I think this is what you should be doing, simple and elegant... do not understand why you complicate as much :)
I am trying to write code to search all children for a div that has a specific class. The DIV does not have an ID. Here is the HTML I will be using.
<div class="outerBUBGDiv">
<div class="innerBUBGDiv">
<div class="bgHeaderH2">Technology Group</div>
<div class="bgBodyDiv">
<div align="center">
<img height="33" border="0" width="180" src="/heading.jpg"/>
/////other stuff here/////
</div>
</div>
</div>
How can I get the text inside the div with the class bgHeaderH2?
$(this).find(".bgHeaderH2").html();
or
$(this).find(".bgHeaderH2").text();
Based on your comment, moddify this:
$( '.bgHeaderH2' ).html (); // will return whatever is inside the DIV
to:
$( '.bgHeaderH2', $( this ) ).html (); // will return whatever is inside the DIV
More about selectors: https://api.jquery.com/category/selectors/
I'm not sure if I understand your question properly, but it shouldn't matter if this div is a child of some other div. You can simply get text from all divs with class bgHeaderH2 by using following code:
$(".bgHeaderH2").text();