Monday, 15 April 2013

jquery - Add class to list item if it's child image width is < 667 -


I have a list of images that are inside a list tag. I want to add a class in the list tag via jquery, if the image (which is in the list tag) width is 667px

  jQuery ('.html-gallery li') smaller than is. Function () {if (jQuery (this). Child (). Attr ('width') & lt; 700) {jQuery (this). Parent (). AddClass ('half');};}); & Lt; Ul class = "basic-gallery text-center" & gt; & Lt; Li & gt; & Lt; Img class = "attachment-large" width = "667" height = "1000" alt = "yan savigning photography" src = "http://yonsavin.com/wp-content/uploads/2015/ 03/ 1-250. Jpg "style =" max-height: 917 pixels; width: auto; height: auto; "& gt; & Lt; / Img & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Img class = "attachment-large" width = "667" height = "1000" alt = "yan savigning photography" src = "http://yonsavin.com/wp-content/uploads/2015/ 03/ 1-250. Jpg "style =" max-height: 917 pixels; width: auto; height: auto; "& gt; & Lt; / Img & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Img class = "attachment-large" width = "667" height = "1000" alt = "yan savigning photography" src = "http://yonsavin.com/wp-content/uploads/2015/ 03/ 1-250. Jpg "style =" max-height: 917 pixels; width: auto; height: auto; "& gt; & Lt; / Img & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Img class = "attachment-large" width = "667" height = "1000" alt = "yan savigning photography" src = "http://yonsavin.com/wp-content/uploads/2015/ 03/ 1-250. Jpg "style =" max-height: 917 pixels; width: auto; height: auto; "& gt; & Lt; / Img & gt; & Lt; / Li & gt;  

How is this possible?

If you want width from the img tag properties:

  $ ('basic gallery'). Each (function () {if ($ (this) at ('width') & lt 667) {$ (this) .clostest ('ul'). AddClass ('half');};}); Otherwise, after the answer to the above @ Arri, you can get the width of the image:  
  $ ('basic gallery'). (Function () (if ($ (this) .find ('img'). Width () & lt; 667) {$ (this) .clostest ('ul'). AddClass ('half');};} );  

No comments:

Post a Comment