I have the following <img> elements below on different pages. How can I grab all the data-uuid attributes from all using javascript?
It should be able to handle if there is only 1 <img> element or if there are more than 1.
Page foo:
$('[data-uuid]').on('click', function() {
alert($(this).attr('data-uuid'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src='https://placeimg.com/200/200/animals' data-uuid='123'>
<img src='https://placeimg.com/200/200/animals?t=1526063181645' data-uuid='456'>
<img src='https://placeimg.com/200/200/animals?t=1526063190252' data-uuid='789'>
Page bar:
<img src='some-url-5' data-uuid=157>
querySelectorAllMDN and Attribute selector:
let uuids = [...document.querySelectorAll("[data-uuid]")].map(el =>
el.dataset.uuid
);
console.log( uuids )
<img src='some-url' data-uuid=123>
<img src='some-url1' data-uuid=456>
<img src='some-url2' data-uuid=789>
A jQuery version:
var uuids = $("[data-uuid]").get().map(function(el) {
return el.getAttribute("data-uuid");
});
console.log( uuids )
<img src='some-url' data-uuid=123>
<img src='some-url1' data-uuid=456>
<img src='some-url2' data-uuid=789>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
you just have to look for all the img that has a data-uuid attribute
document.querySelectorAll("img[data-uuid]");
something like this
Related
I want to get specific's id's children image src data.
With cheer.io I can get HTML data from it with $("#descTemplate").html(); code, but I want to get it's html codes children's all of image data.
So I tried $("#descTemplate").find('img').attr('src'); code but it only returns undefined
Either $("#descTemplate").html().find('img').attr('src'); code returns nothing.
let searchUrl = 'URL ADDRESS';
await got(searchUrl, {
timeout: {
request: 30000,
},
}).then(async(response) => {
const $ = cheerio.load(response.body); // HTML data
// itemDetailImage = $("#descTemplate").html(); // Get HTML part data (Successfully get HTML file)
itemDetailImage = $("#descTemplate").find('img').attr('src'); // return undefined
console.log(itemDetailImage);
})
[console.log(itemDetailImage)]
<div style="text-align:center;">
<img src="//127.0.0.1/upload/1647265117250_378688.jpg" data-ke-src="//127.0.0.1/upload/1647265117250_378688.jpg" alt="">
<img src="//127.0.0.1/upload/1647265118130_300066.jpg" data-ke-src="//127.0.0.1/upload/1647265118130_300066.jpg" alt="">
<img src="//127.0.0.1/upload/1647265118350_681553.jpg" data-ke-src="//127.0.0.1/upload/1647265118350_681553.jpg" alt="">
<img src="//127.0.0.1/upload/1647265118885_854027.jpg" data-ke-src="//127.0.0.1/upload/1647265118885_854027.jpg" alt="">
<img src="//127.0.0.1/upload/1647265119412_530569.png" data-ke-src="//127.0.0.1/upload/1647265119412_530569.png" alt="">
<img src="//127.0.0.1/upload/1647265119594_158186.jpg" data-ke-src="//127.0.0.1/upload/1647265119594_158186.jpg" alt="">
<img src="//127.0.0.1/upload/1647265119973_110062.jpg" data-ke-src="//127.0.0.1/upload/1647265119973_110062.jpg" alt="">
</div>
It looks like it's not there, but you can try:
$("#descTemplate img").get().map(img => $(img).attr('src'))
I have a page of about 15-20 YouTube videos I’d like to dynamically update the img src to point to the YouTube hosted thumbnails. From a logic perspective, I want to find every DIV with a class of “videos”, get the ID of that class and update the image source with the dynamically inserted value, e.g., http://img.youtube.com/vi/DbyNtAQyGs/0.jpg in the first example. All IDs are unique because they are the YouTube video IDs and there is only one img tag under each “videos” class.
This code would run on page load so it would have to be pretty fast to ensure the values are set before the browser passes the each img tag in the DOM. Hoping I can get one of those one liners instead of vars and multiple lines.
<div id="DbyNtAQyGs" class="videos">
<img src="" width="212" height="124" />
</div>
<div id="Fh198gysGH" class="videos">
<img src="" width="212" height="124" />
</div>
Current Code
$('.videos img').attr('src', 'http://img.youtube.com/vi/' + $(this).closest('div').attr('id')); + '/0.jpg');
You can use:
$('.videos img').attr('src', function() { return 'http://img.youtube.com/vi/' + $(this).closest('div').attr('id') + '/0.jpg'; })
Loop through the .videos elements:
$('.videos').each(function(){
var $this = $(this),
_id = $this.attr('id'); // Capture the ID
// Construct the img src
$this.find('img').attr('src', 'http://img.youtube.com/vi/' + _id + '/0.jpg');
});
Bonus: chain in the click event for your anchor:
$this.find('a').click(function(e){
e.preventDefault();
loadPlayer(_id);
}).find('img').attr('src', 'http://img.youtube.com/vi/' + _id + '/0.jpg');
So you can simplify your markup:
<div id="DbyNtAQyGs" class="videos">
<img src="" width="212" height="124" />
</div>
The code below works to make one copy of the image clicked. I am needing the code below to work for multiple images.
For example if I click 5 images on the screen, the same 5 images should generate at the bottom of the page. The user should be able to select 5 out of 10 images. Any thoughts? Thanks!
JS:
function changeImage() {
var imgSrc = 'http://placehold.it/150';
if (document.getElementById('myImage').src === imgSrc) {
document.getElementById('new').src = imgSrc;
}
}
HTML
<a href="#" onClick="changeImage()">
<img id="myImage" src="http://placehold.it/150"></a>
<img id="new" src="http://placehold.it/200">
You can use JQuery clone() function
$('img').click(function() {
$('body').append($(this).clone());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50/000000/ffffff">
<img src="http://placehold.it/50x50/1C90F3/ffffff">
<img src="http://placehold.it/50x50/F2BB7C/ffffff">
you can use jquery to do that
HTML
<a href="#" id="my-image">
<img id="myImage" src="http://placehold.it/150"></a>
<img id="new" src="http://placehold.it/200" />
JS
$('#my-image').click(function(){
//setting attribute src to be equal as src from #myImage
$('#new').attr('src', $('#myImage').attr('src'));
//returning false in order to avoid default action
return false;
});
So that is it :)
Just remember to put this code after your html or into
$(document).ready(function(){ ..... });
I hope this helps.
I'm in the process of finding a mobile alternative to Colorbox. Swipebox seemed like a great alternative, but unlike colorbox it doesn't seem to allow every individual image open but combined all of them into a gallery. The conventional way of adding swipebox is as so:
$('.class').swipebox();
which adds everything with that class into a swipebox gallery. Is there a way to instead open each item of a certain class individually?
It looks like you just need to separate your images into "galleries", which may seem counter intuitive as you don't want galleries...
Check the advanced docs for gallery:
You can add a rel attribute to your links to separate your galleries.
Like I said it's counter intuitive, but the feature that's designed to group images together into galleries can be used to separate them. Basically you're setting up galleries of one by adding a different rel attribute to each one.
Working Example on jsFiddle
$('.swipebox').swipebox();
img {
width: 500px;/* example only */
}
<link href="http://brutaldesign.github.io/swipebox/src/css/swipebox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://brutaldesign.github.io/swipebox/src/js/jquery.swipebox.js"></script>
<a href="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" class="swipebox" title="My Caption" rel="gallery-1">
<img src="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" alt="image" />
</a>
<a href="http://pluggedinwebdesign.com/images/CanopyGround.jpg" class="swipebox" title="My Caption" rel="gallery-2">
<img src="http://pluggedinwebdesign.com/images/CanopyGround.jpg" alt="image" />
</a>
If adding a rel attribute to every swipebox looks tedious, you can add the rel attribute with a little script:
$('.swipebox').swipebox();
var X = 0; // set a global var
$('.swipebox').each(function() { //for each swipebox
X += 1; //increment the global var by 1
$(this).attr('rel', 'gallery-' + X); // set the rel attribute to gallery- plus the value of X
});
img {
width: 500px;/* example only */
}
<link href="http://brutaldesign.github.io/swipebox/src/css/swipebox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://brutaldesign.github.io/swipebox/src/js/jquery.swipebox.js"></script>
<a href="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" class="swipebox" title="My Caption">
<img src="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" alt="image" />
</a>
<a href="http://pluggedinwebdesign.com/images/CanopyGround.jpg" class="swipebox" title="My Caption">
<img src="http://pluggedinwebdesign.com/images/CanopyGround.jpg" alt="image" />
</a>
My simple solution :)
<script type="text/javascript">
;( function( $ ) {
$( '.swipebox' ).swipebox();
$( '.swipebox2' ).swipebox();
} )( jQuery );
</script>
<img src="small/1-1.jpg" />
<img src="small/1-2.jpg" />
<img src="small/2-1.jpg" />
<img src="small/2-2.jpg" />
I am trying to create a page where when you click on any of the three images. It inserts the content into the empty div above the image links.
Here is my javascript code:
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').click (function() {
$('.deal_content').append(<img src="deal_content.fw.png" width="587" height="299" alt="Your Deals!" />);
return false;
});
});
</script>
and this is the HTML it is to effect:
<div class="deal_content">
</div>
<div id="imagelink">
<a href="#">
<img src="for_men_btn.fw.png" width="200" height="87" alt="For Men" />
</a>
<a href="#">
<img src="for_couples_btn.fw.png" width="200" height="87" alt="For Couples" />
</a>
<a href="#">
<img src="for_teens_btn.fw.png" width="200" height="87" alt="For Teens" />
</a>
</div>
I wish the new image to be put in the deal_content class div.
In your append method, if you put double quotes around the HTML and replace the current quotes with single quotes, it should work. Append takes a string or a JQuery selector, not markup.
You need to make the element a string in order to pass it through append
$(document).ready(function() {
$('img').click (function() {
$('.deal_content').append('<img src="deal_content.fw.png" width="587" height="299" alt="Your Deals!" />');
return false;
});
});
Considerting this is what you want:
I wish the new iamge to be put in the deal_content class div.
You are almost there:
In the Javascript that you have:
$(document).ready(function () {
$('img').click(function () {
$('.deal_content').append();
return false;
});
});
you need a html() instead of append(). And insert a img tag, and grab the srcfrom the image thatw as clicked on.
$('.deal_content').html("Image \"" + $(this).attr("src") +"\" here: <img src=" + $(this).attr("src") + "/>");
See http://jsfiddle.net/nivas/PA63e/
$('#imagelink').on('click', 'img', function(){
$('.deal_content').append( this );
});
or if you want to duplicate the image:
$('#imagelink').on('click', 'img', function(){
$('.deal_content').append( this.cloneNode() );
});
is that what you want? This way it will only move the images that are inside imagelink element