Question

I have a function that changes a dom element’s text to a given value, for example, to change the text on the following:

<a id="btnAdd" href="#" onclick='Persist()' data-role="button" data-icon="plus">Persist</a>

I need to use this code:

domElement.find('.ui-btn-text').text('testing');

As you can see, I need to call .find('.ui-btn-text'). Is there a way to determine the ‘data-role’ (in this case ‘button’) so I can use the correct “thing” (e.g. ‘.ui-btn-text’) to use – I think this is referred to as a CSS class?, not sure.

Unfinished Function:

        function SetDomElementText(elementId, value) {
            //get the domElement
            var domElement = $('#' + elementId);

            //check if it exists
            if (domElement.length === 1) {

                switch(domElement.get(0).tagName.toLowerCase()) {
                    case 'label':
                        domElement.text('testing');
                        break;
                    case 'a': //link
                        //I need to determine what the data-role is here.
                        domElement.find('.ui-btn-text').text('testing');
                        break;
                }
            }
        }

Answer 1

You can get it just like you’re getting any other HTML attribute.

var datarole = $(selector).attr('data-role');

Alternatively, jQuery also picks up data-* attribute values automatically, so you can access it via .data():

var datarole = $(selector).data('role');  // data-role