Retrieving the attribute value using jquery

Question

Retrieving the attribute value using jquery

This is the code I have written with angular js. using jquery I want to get the "data-index" attribute value

<div class="claimed" droppable value="2">

        <div class="phase1" ng-repeat="item in Phase1claimed"
            data-index="{{$index}}" draggable value="2">
            <div class="ClaimedAccordion" accordion-title="{{item.name}}" unclaimhi="unclaimhi('1');">

                {{item.newLabel}} <br /> {{item.desc}} <br /> {{item.effort}} <br />
                {{item.owner}} <br /> {{item.issues}} <br /> {{item.comments}} <br />
                {{item.dependency}} <br /> {{item.content}}
            </div><br/>
        </div>
    </div>

javascript
jquery
angularjs

Answer 1

You can use data() to get the data attributes data-index using the class selector.

Live Demo

$('.phase1').data('index');

You can use descendant selector to find out element with phase class within element with claimed class.

$('.claimed .phase1').data('index');

You can use attr to get the attribute but using the attr will not get you value being changed by javascript. Its worth reading this post for difference between data and attr.

Live Demo

<a id="foo" data-foo="bar" href="#">foo!</a>

alert( $('#foo').attr('data-foo') );
alert( $('#foo').data('foo') );

Answer 2

You can also use attr() jqury api function to get the data attribute

$('.phase1').attr('data-index');