How to use data attributes in jQuery?

Question

I'm trying to add a long shadow by adding css styling with jQuery for any elemet has data-shadow attributes. the shadow color will be the value of the elemet. So this is my try:

<div data-shadow="#A00909">Test</div>

div{
    background:red;
    display:inner-block;
    font-size:44px;
    text-align:center;
    font-weight:bold;
    color:#fff;
    padding:40px;    
    overflow:hidden;
    width:50%;
    margin:auto;
}

// jQuery
$(function() {

    $( "*" ).attr( "data-shadow", function( i, value ) {
        var t = $(this).data('shadow');
        var n, sh = "",long = 90;        
        for( n = 1 ; n <= long ; n++ ){
            sh = sh + n + "px "+n+"px "+ value; 
            if( n != long ) sh = sh +", ";
        }

        $(this).css("text-shadow",sh);

    });

});

in the jQuery code I'm trying to get the value of data-shadow but without success.
Otherwise, when I use a specified value like in the following code - it works:

$( "*" ).attr( "data-shadow", function( i, value ) {
    var temp = "#A00909";
    var t = $(this).data('shadow');
    var n, sh = "",long = 90;        
    for( n = 1 ; n <= long ; n++ ){
        sh = sh + n + "px "+n+"px "+ temp; 
        if( n != long ) sh = sh +", ";
    }

    $(this).css("text-shadow",sh);

    });
});

http://jsfiddle.net/b0fpkccf/

How to use the value of data-shadow instead of temp value for each element has data-shadow attributes?

Hey, looks like it's working to me. However you are using temp not t in your for loop? Try sh = sh + n + "px "+n+"px "+ t; - Also to see it easier use a different colour in your data-shadow. — Dave Walker
– Dave Walker, Commented Nov 13, 2014 at 22:12
You can use $('[data-shadow]') instead of $('*') as the selector also — elzi
– elzi, Commented Nov 13, 2014 at 22:16
it's not working with t. Look at this jsfiddle.net/b0fpkccf/3 — zuhair
– zuhair, Commented Nov 13, 2014 at 22:16
The * selector is wrong because it's dragging up all sorts - that's why elzi has it correct to use a specific selector — Dave Walker
– Dave Walker, Commented Nov 13, 2014 at 22:19

Jack · Accepted Answer · 2014-11-13 22:15:12Z

3

You were close! First, instead of doing a query selector of all *, you can use an attribute selector.

After that, you'll just call each as you were doing (rather than attr).

Here's an updated fiddle: http://jsfiddle.net/jpattishalljr/b0fpkccf/4/

$(function() {
    $('[data-shadow]').each(function(i, value) {
        var t = $(this).data('shadow');
        var n, sh = "",long = 90;        
        for( n = 1 ; n <= long ; n++ ){
            sh = sh + n + "px "+n+"px "+ t; 
            if( n != long ) sh = sh +", ";
        }

        $(this).css("text-shadow",sh);
    });
});

answered Nov 13, 2014 at 22:15

Jack

9,4282 gold badges36 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roko C. Buljan · Accepted Answer · 2014-11-13 22:32:52Z

0

demo

You can go for the $("[data-shadow]") selector (as suggested by Jack) and access directly the element's .css() callback (cause $()) is already a collection of elements:

$('[data-shadow]').css("text-shadow", function() {
    var t=$(this).data().shadow, sh="", long=90;        
    for(var n=1; n<=long; n++) sh += n+"px "+n+"px "+t+(n<long?" ,":""); 
    return sh;
});

answered Nov 13, 2014 at 22:32

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

1 Comment

Jack Over a year ago

Great point! jQuery's implicit iteration is a wonderful thing!

Collectives™ on Stack Overflow

How to use data attributes in jQuery?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related