Get first value of translate3d with jQuery

Question

I'm trying to get the first value of translat3d from a style attribute. In the real app the .css('transform') wont work so thats why I'm using attr.('style'...)

Can someone explain how to get the first value of the translate3d?

http://jsfiddle.net/6gLqw4df/2/

Answer 1

A little tricky but it works. To be more obvious, I increase 100px per one click.

$('button').on('click', function() {
    var slideTransform = $('#mySlide').attr('style').split(';');
    slideTransform = $.map(slideTransform, function(style){
        style = style.trim();
        if (style.startsWith('transform:translate3d')) {
            var match = style.match(/transform:translate3d\((.+)px,(.+)px,(.+)px\)/);
            var value = parseInt(match[1]);
            var newValue = value + 100;
            console.log(newValue);
            return 'transform:translate3d(' + newValue + 'px, 0px, 0px)';
        }
        return style;
    });
    // add 100px to first value of translate3d
    $('#mySlide').attr('style', slideTransform.join(';'));
});

https://jsfiddle.net/Lr5rhyug/

Sorry for my ugly code. startsWith can be removed by inspecting on match result. (like checking its length, etc.)