This question already has answers here:
How to get nth jQuery element
(11 answers)
Closed 4 years ago.
I have 3 images all within the same class name "image"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imageHolder" style="width: 80%; display: inline;">
<div class="image">
<img src="//i.stack.imgur.com/nO2hl.png">
</div>
<div class="image">
<img src="//i.stack.imgur.com/IkjJW.png">
</div>
<div class="image">
<img src="//i.stack.imgur.com/QrKSV.png">
</div>
</div>
I would like to replace only the 2nd image with a different image link. So I tried something like this:
$('.image').find('img').attr('src', 'http://cdn.shopify.com/s/files/1/1061/1924/products/Smiling_Face_Emoji_with_Blushed_Cheeks_grande.png?v=1480481056');
However, this replaces all the images and not just the 2nd one so I tried to do $('.image')[1].find(..)..., but that didn't work I was getting the error: Uncaught TypeError: $(...)[1].find is not a function.
I would greatly appreciate it if someone can please explain what I'm doing wrong and how I can fix this?
Thanks.
You are quite close - find() will return an array and you want your changes to be applied at a single element:
$($('.image').find('img')[1]).attr('src', 'http://cdn.shopify.com/s/files/1/1061/1924/products/Smiling_Face_Emoji_with_Blushed_Cheeks_grande.png?v=1480481056');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imageHolder" style="width: 80%; display: inline;">
<div class="image">
<img src="//i.stack.imgur.com/nO2hl.png">
</div>
<div class="image">
<img src="//i.stack.imgur.com/IkjJW.png">
</div>
<div class="image">
<img src="//i.stack.imgur.com/QrKSV.png">
</div>
</div>
https://api.jquery.com/find/
Related
I spent lots of time trying to figure out getting a values from an element using jquery. Here's the code
<div class="school">
<div class="school-prev">
<img src="images/photos.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Admin</h5>
<small class="text-muted">School Board</small>
</div>
<div class="school">
<div class="school-prev">
<img src="images/photos2.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Finance</h5>
<small class="text-muted">School Board</small>
</div>
Jquery Coe
$(document).ready(function(){
$(".school").click('.school-title', function(e){
var showValue=$(this).text();
alert(showValue);
});
});
Example of return values: Admin School Board;
Expected value is should be "Admin or Finance"
NB: Any solution should consider outside div(school) clickable and not school-title div alone.
Warm regards.
Try the following jQuery code:
$(document).ready(function(){
// console.log('th');
$(document).on('click','.school .school-title', function(e){
e.preventDefault()
var th = $(this); //change over here
console.log(th.text());
});
});
You can change $(".school").click('.school-title', function(e){ to $(".school").on('click', '.school-title', function(e) { and it will solve the problem for you.
After updating your NB, you can use:
$(document).ready(function() {
$(".school").click(function(e) {
var showValue = $('.school-title',this).text()
alert(showValue);
});
});
Demo
$(document).ready(function() {
$(".school").click(function(e) {
var showValue = $('.school-title',this).text()
alert(showValue);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="school">
<div class="school-prev">
<img src="images/photos.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Admin</h5>
<small class="text-muted">School Board</small>
</div>
<div class="school">
<div class="school-prev">
<img src="images/photos2.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Finance</h5>
<small class="text-muted">School Board</small>
</div>
You want a click anywhere in the school div to get the title - not just on the title itself. To do that, you just need to check for the school-title child element in the click function on school.
This will get all children with the class school-title (of which there will only be one - it works the same as find except on direct children only) and get the text from it:
$(document).ready(function(){
$(".school").click('.school-title', function(e){
var showValue=$(this).children('.school-title').text();
alert(showValue);
});
});
/* Just for illustration to make it easier to see what is happening */
.school { border: 1px solid #ccc;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="school">
<div class="school-prev">
<img src="images/photos.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Admin</h5>
<small class="text-muted">School Board</small>
</div>
<div class="school">
<div class="school-prev">
<img src="images/photos2.png" class="img-responsive" alt="" />
</div>
<h5 class="school-title">Finance</h5>
<small class="text-muted">School Board</small>
</div>
You only have one child with school-title in this case, but it will work with multiple titles if needed (e.g. if you did want to get "Admin School Board" for example, you could simply add the school-title class to the text-muted element).
Reference: jQuery children documentation
You are using 'school' class name for the click event and want to get the value child element of div. That is not possible in this way.
Simply Change the code "$(this).text();" to "$(classname,this).text();".
Happy coding.
I'm trying to swap out the title attribute on all images on the page that contain the string slide in the class name. The image class names vary and are followed by a unique numeric string (ex: slide-1234, slider-4321) so it's important it just contains the string slide. I want to replace it with the WordPress post title. Here is my code so far (doesn't work)
<script>
var title = '{{get_the_title()}}';
$('img[class*=slide]').attr('title', title);
</script>
Very simple, but unfortunately doesn't work. I used alert to debug and was able to print the title, but the selector is the issue.
Here's the HTML
<h6 class="text-primary mb-5 mt-5">Session Photos</h6>
<div id="metaslider-id-1572" style="width: 100%;" class="ml-slider-3-15-3 metaslider metaslider-flex metaslider-1572 ml-slider">
<div id="metaslider_container_1572">
<div id="metaslider_1572">
<ul aria-live="polite" class="slides">
<li style="display: block; width: 100%;" class="slide-1573 ms-image"><img src="https://knowledge.page.org/wp-content/uploads/2019/07/DSC04292-850x500.jpg" height="500" width="850" alt="" class="slider-1572 slide-1573" title="DSC04292" /></li>
</ul>
</div>
</div>
</div>
I believe your script is running before the DOM is fully loaded. You can either place the script code at the bottom of the body tag OR try wrapping your code with $(document).ready(function(){...}).
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var title = 'someTitle';
$('img[class*=slide-]').attr('title', title);
});
</script>
<h6 class="text-primary mb-5 mt-5">Session Photos</h6>
<div id="metaslider-id-1572" style="width: 100%;" class="ml-slider-3-15-3 metaslider metaslider-flex metaslider-1572 ml-slider">
<div id="metaslider_container_1572">
<div id="metaslider_1572">
<ul aria-live="polite" class="slides">
<li style="display: block; width: 100%;" class="slide-1573 ms-image"><img src="https://knowledge.page.org/wp-content/uploads/2019/07/DSC04292-850x500.jpg" height="500" width="850" alt="" class="slider-1572 slide-1573" title="DSC04292" /></li>
</ul>
</div>
</div>
</div>
Here my script :
function changeImage(event){
event = event || window.event;
var targetElement = event.target || event.srcElement;
if (targetElement.tagName == "IMG"){
document.getElementByClass("img-big-wrap").src = targetElement.getAttribute("src");
document.getElementById("mainimageLink").href = 'link'+targetElement.getAttribute("data-link")+'.html';
}
}
Inspired of this Answer : Javascript Gallery - Main Image href change
My HTML :
<div class="gallery-wrap">
<div class="img-big-wrap">
<a id="mainimagelink" href="<?php echo $data[0][gallery][0][photo];?>">
<img class="img-big-wrap" src="<?php echo $data[0][gallery][0][photo];?>" alt="">
</div>
<div class="img-small-wrap" onclick="changeImage(event)">
<div class="item-gallery"> <img src="<?php echo $data[0][gallery][1][thumb];?>" data-link="1"> </div>
<div class="item-gallery"> <img src="<?php echo $data[0][gallery][2][thumb];?>" data-link="2"> </div>
<div class="item-gallery"> <img src="<?php echo $data[0][gallery][3][thumb];?>" data-link="3"> </div>
<div class="item-gallery"> <img src="<?php echo $data[0][gallery][4][thumb];?>" data-link="4"> </div>
</div>
</div>
The code is actualy just open me the link of the main image only
I want to change the main image with the thumbnails when I click On, I dont know if what i'm doing is the good solution
Working Plunk: http://plnkr.co/edit/pjpHBUD4yPihqr7lJKAD?p=preview
<div class="gallery-wrap">
<div>
<a id="mainimagelink" href="https://blog.conservation.org/wp-content/uploads/2014/06/ci_19290600_cropped.jpg">
<img class="img-big-wrap" src="https://blog.conservation.org/wp-content/uploads/2014/06/ci_19290600_cropped.jpg?>" alt="">
</a>
<hr/>
</div>
<div class="img-small-wrap" ">
<div class="item-gallery " onclick="changeImage(event) "> <img src="https://s5.favim.com/610/52/Favim.com-winter-nature-small-canon-eos-7d-474348.jpg " data-link="1 "> </div>
<div class="item-gallery " onclick="changeImage(event) "> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfAMUZQLGObfUBSLgnPj5b5C7Ww2DNMtKbwkuTbglK-p1La17BnA " data-link="2 "> </div>
</div>
</div>
A couple of things you've missed.
The HTML DOM was not well constructed. The tag with id mainimagelink was left unclosed, leading to opening of the main image everytime you clicked on any image.
Not sure of your use case but I believe you were trying to create a thumbnail gallery with a preview. Added Image URLs and CSS to simulate the API response.
'img-big-wrap' class was used for the image container and the actual Image itself, which would lead to errors when you try to locate your element with js.
document.getElementByClass is not the right name for the method. I believe you were going for 'document.getElementsByClassName' which returns an array as multiple elements can have the same className.
Refer to querySelector (most useful of them all):
https://www.w3schools.com/jsref/met_document_queryselector.asp
All the best!
First of all, you have used the same class more than once and tried to access it img-big-wrap.
There is also no accessor called getElementByClass instead use
getElementsByClassName which is an array since you can have multiple divs with the same class.
Typo here "mainimageLink" which you called your div with id="mainimagelink", case matters.
I have moved onclick into JS using addEventListener which saves me passing parameters from the div.
Add an id into your thumbnail parent div myImgDiv and used it to hook an Event Listener to it.
Here is what the code looks like (Not many changes were made):
let smallImgDiv = document.getElementById('myImgDiv');
smallImgDiv.addEventListener('click', (e) => {
let targetElement = e.target || e.srcElement;
let tagName = targetElement.tagName;
if(tagName === "IMG") {
document.getElementById('bigImage').src = targetElement.getAttribute("src");
document.getElementById("mainimagelink").href = 'link' + targetElement.getAttribute("data-link") + '.html';
}
});
.img-small-wrap img{
width: 150px;
height: 150px;
}
.img-big-wrap {
height: 200px;
}
<div class="gallery-wrap">
<div class="img-big-wrap">
<a id="mainimagelink" href="#">
<img id="bigImage" class="img-big-wrap" src="http://via.placeholder.com/300.png" alt="">
</a>
</div>
<div id="myImgDiv" class="img-small-wrap">
<div class="item-gallery"> <img src="https://getuikit.com/v2/docs/images/placeholder_200x100.svg" data-link="1"> </div>
<div class="item-gallery"> <img src="https://cdn.dribbble.com/users/312581/screenshots/1676038/female-placeholder_1x.png" data-link="2"> </div>
<div class="item-gallery"> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1134418-200.png" data-link="3"> </div>
<div class="item-gallery"> <img src="https://source.sierrawireless.com/~/media/developer%20zone/icons/sw_dz_icons_placeholder.ashx?h=240&la=en&w=240" data-link="4"> </div>
</div>
This question already has answers here:
Select elements by attribute
(17 answers)
Closed 6 years ago.
i have a situation in my page i don't have any clue other than this 2 clue to target
<div itemscope>
some <html>
........
</div>
how can i target div having itemscope i,e <div itemscope>
suppose i have structure like this
<div itemscope>
<a hrfe="http://www.a.com">a.com</a>
</div>
<div itemscope type="tang">
<a hrfe="http://www.b.com">b.com</a>
</div>
<div>
<a hrfe="http://www.c.com">c.com</a>
</div>
<div>
<a hrfe="http://www.d.com">d.com</a>
</div>
PLEASE SUGGEST ME WHAT THIS KIND OF SELECTOR IS CALLED SO THAT I CAN SEARCH IT ON STACKOVERFLOW
var allDivWith_itemscope = $('div[i don"t know what else]');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div itemscope>
<a hrfe="http://www.a.com">a.com</a>
</div>
<div itemscope type="tang">
<a hrfe="http://www.b.com">b.com</a>
</div>
<div>
<a hrfe="http://www.c.com">c.com</a>
</div>
<div>
<a hrfe="http://www.d.com">d.com</a>
</div>
Well there are two things i want to mention:
You have a typo with href attribute.
You should use data-* prefix for custom attributes.
So, on basis of these you can change to this:
<div data-itemscope>
Now in js/jquery/css you can do this:
// css
div[data-itemscope]{
properties:values;
}
// javascript
document.querySelector('div[data-itemscope]')
//jquery
$('div[data-itemscope]')
I need to achieve this effect
but I need to replace images by container (div)
something like:
<div id="myGallery">
<img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" />
<img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" />
<img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" />
<img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" />
</div>
by
<div id="myGallery">
<div id="item1">contenido uno</div>
<div id="item2">contenido dos</div>
<div id="item3">contenido tres</div>
<div id="item4">contenido cuatro</div>
</div>
any ideas or any plugin?
Take a peek at this demo – it looks like it does what you want, and it shouldn't be too hard to modify the ideas from it for your purposes.