Jquery .show() not working with .find() on HTML5 data descriptor - help needed!

See example here: http://jsfiddle.net/mzhang23/CGfzq/9/

I am using the following code to try and allow a click on the blue shirt thumbnail image in the rightmost column to show the blue shirt image divs in the first and second column开发者_如何学C. (To test this, click the "x" on the blue shirt in the middle column to hide it first)

I've used an HTML 5 data-eltype descriptor for the third column image of the blue shirt and hope to use that descriptor to find the relevant class for the .show() function.

    <script type="text/javascript">
        $(document).ready(function(){
        $('.thumbslist .element').click(function(){
        $('.outfit-box').find('.' + $(this).data('eltype')).show(250);
        });
        });    
    </script>

Any ideas why it's not working?

---

For jQuery 1.4.2, what you want is to get the attribute data-eltype see: http://jsfiddle.net/CGfzq/10/

$(document).ready(function(){
    $('.thumbslist .element').click(function(){
        $('.outfit-box').find('.' + $(this).attr('data-eltype')).show(250);
    });
});

edit

As @mu is too short points out, the method you tried will only work in more recent versions.

---

EDIT:

As mu pointed out, more recent versions of jQuery actually do utilize the .data() function to pull in HTML5 data- attributes. But I got lucky and escaped giving a wrong answer by the technicality that you happen to be using an older version of jQuery that does not support this... :-)

Original:

"data-eltype" is the name of the attribute, so to select it with jQuery you need to do this:

$(this).attr('data-eltype');

The HTML5 data- attributes are completely unrelated to jQuery's built-in .data() function.

Hope this helps.