Hide img if it equals a certain height

Question

I'm building a small portfolio with tumblr as my CMS and I need to have thumbnails on the index page. Without hardcoding this, the best way to make this happen seems to be to embed the thumbnail in the body post so the image is pulled through then hiding it on the post page by altering the css to `display:none' by matching it's unique height compared to other images.

It seems great in theory but currently isn't working. What have I missed? The parent div class is .text

<script type="text/javascript">
$(document).ready(function() {
    var hide = $('.text img').data-orig-height();
    if (hide === 167) {
        $('.text img').css('display', 'none');
    } else {
        $('.text img').css('display', 'block');
    }
});
</script>

Image html

<figure class="tmblr-full" data-orig-height="167" data-orig-width="310">
    <img src="http://40.media.tumblr.com/d190030c491be51fd47dd1f4291ae9c3/tumblr_inline_nxblnf7rF61tfshob_400.jpg" data-orig-height="167" data-orig-width="310" width="310" height="167" data-meow="true">
</figure>

Answer 1

Use attribute-value selector

$('.text img[data-orig-height="167"]').hide();

This will select all the images inside the .text element having data-orig-height attribute value as 167.

$('.text img[data-orig-height!="167"]').show(); // Show the images whose attribute value is not 167

---

In the OP code,

$('.text img').data-orig-height();

is not valid function. This'll throw data-orig-height is not a function error.

To get data-* attribute value, use data().