I use a script called "imageLightbox" and in this Script is a line:
var description = $( 'a[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"] img' ).attr( 'alt' );
Can anybody tell me what's happened there?
-
1What don't you understand?cookie monster– cookie monster2014-02-12 22:17:50 +00:00Commented Feb 12, 2014 at 22:17
-
Variable declaration? variable assignment? string concatenation? function calls? method calls? behavior of the specific function/method WRT the arguments provided?cookie monster– cookie monster2014-02-12 22:24:54 +00:00Commented Feb 12, 2014 at 22:24
Add a comment
|
4 Answers
Assuming #imagelightbox is the id of an image:
$( '#imagelightbox' ).attr( 'src' ) returns the src (source) of an image, say "bla/foo.jpg".
The second bit of code the uses the src as part of its selector, so
$( 'a[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"] img' )
effectively would become
$( 'a[href="bla/foo.jpg"] img' )
which finds an a tag with an href of bla/foo.jpg and gets the img element within it.
Finally the .attr( 'alt' ); on the end, grabs the alt tag text from that element, which is returned and set in to the description variable.
Comments
It gets the alt attribute of an img which is contained within an anchor with the same href as the src of #imagelightbox.
Broken down a bit:
// get the src attribute of the #imagelightbox element
var imagelightSrc = $( '#imagelightbox' ).attr( 'src' );
// get an img contained in a anchor with an href equal to imagelightSrc
var img = $( 'a[href="' + imagelightSrc + '"] img' );
// get the alt attribute of that image
var description = img.attr( 'alt' );
Useful links:
Comments
Broken into pieces
// get imageLightbox
var $imageLightbox = $( '#imagelightbox' );
// get src of imageLightbox
var srcOfimageLightbox = $imageLightbox.attr( 'src' )
// find corresponding anchor
var $correspondingAnchor = $( 'a[href="' + srcOfimageLightbox + '"]')
// find correspponding image
var $correspondingImage = $correspondingAnchor.find('img')
// get alt attribute of correspponding image
var altOfcorrespondingImage = $altOfcorrespondingImage.attr( 'alt' )
// the description is taken from the alt attribute of the corresponding image
var description = altOfcorrespondingImage
Comments
it is looking for an img node, which could be in all descent child nodes of an a node like:
$( 'a img' )
but not in any kind of a node, only those with a specfic href attribute:
$( 'a[href=...] img' )
that attribute is the value of src attribute of a node name with imagelightbox as its id:
var src = $( '#imagelightbox' ).attr( 'src' );
$( 'a[href="' + src + '"] img' )
which is probably another img node because of src node.
at the end when it finds the image it gets it alt attribute.
var src = $( '#imagelightbox' ).attr( 'src' );
var altValue = $( 'a[href="' + src + '"] img' ).attr( 'alt' );
