Retrieving the attribute value using jquery

Question

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>

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') );