CODEWITHSUNDEEP
jqueryhtmlattributes
ghetal
ghetal

Reputation: 403

Getting attribute value

I have html as below.

<div class="testimonials-list">
    <div class="slider testimonials-list-slider" data-index="0">
    <div class="testi-list tr-slide">
            <p>As the clock struck midnight on Chaitra Vadi</p>  
    </div>
    <div class="testi-list tr-slide" tr-active data-index="1">
        <p>the kingdom of Pundarikgiri in Mahavideh Kshetra,.</p> 
    </div>
    <div class="testi-list tr-slide" data-index="2">
        <p>3 shetra, a beautiful baby a Taurus on his body was bor</p> 
    </div>
    </div>
</div>

I want to get the active div (i.e. tr-active class) and then want to access the value of attribute 'data-index'. How can we do this using jquery?

var i = $('.testi-list').find('tr-active').attr('data-index');

Above line is not working.

Upvotes: 1

Views: 3521

Answers (5)

Ranjith
Ranjith

Reputation: 219

Found solution from data attribute.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="testimonials-list">
    <div class="slider testimonials-list-slider" data-index="0">
    <div class="testi-list tr-slide">
            <p>As the clock struck midnight on Chaitra Vadi</p>  
    </div>
    <div class="testi-list tr-slide tr-active"  data-index="1">
        <p>the kingdom of Pundarikgiri in Mahavideh Kshetra,.</p> 
    </div>
    <div class="testi-list tr-slide" data-index="2">
        <p>3 shetra, a beautiful baby a Taurus on his body was bor</p> 
    </div>
    </div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>
  var i = $('.tr-active').data("index");
    alert(i);
  </script>
</div>
</body>
</html>

Upvotes: 0

Mohd Asim Suhail
Mohd Asim Suhail

Reputation: 2292

This will do the work for you

$('div[tr-active]').data("index")

Demo: https://jsfiddle.net/rhsxfmcL/

Upvotes: 0

Minksmnm
Minksmnm

Reputation: 264

your html should look like this..

<div class="testimonials-list">
  <div class="slider testimonials-list-slider" data-index="0">
    <div class="testi-list tr-slide">
            <p>As the clock struck midnight on Chaitra Vadi</p>  
    </div>
    <div class="testi-list tr-slide tr-active" data-index="1">
        <p>the kingdom of Pundarikgiri in Mahavideh Kshetra,.</p> 
    </div>
    <div class="testi-list tr-slide" data-index="2">
        <p>3 shetra, a beautiful baby a Taurus on his body was bor</p> 
    </div>
    </div>
</div>

tr-active class was out of the quotes so it was acting as an attribute.

also use this to find data-index

$('.testi-list.tr-active').attr('data-index');

Upvotes: 1

Shiva K Thogiti
Shiva K Thogiti

Reputation: 208

$(function(){

var i = $("[tr-active]").attr("data-index");

alert(i);
});
	<div class="testimonials-list">
<div class="slider testimonials-list-slider" data-index="0">
<div class="testi-list tr-slide">
        <p>As the clock struck midnight on Chaitra Vadi</p>  
</div>
<div class="testi-list tr-slide" tr-active data-index="1">
    <p>the kingdom of Pundarikgiri in Mahavideh Kshetra,.</p> 
</div>
<div class="testi-list tr-slide" data-index="2">
    <p>3 shetra, a beautiful baby a Taurus on his body was bor</p> 
</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Upvotes: 0

Jishnu V S
Jishnu V S

Reputation: 8409

Try this you can do this like $('.testi-list.tr-active').attr('data-index');

$(function(){

var i = $('.tr-active').attr('data-index');

alert(i);
});
	<div class="testimonials-list">
    <div class="slider testimonials-list-slider" data-index="0">
    <div class="testi-list tr-slide">
            <p>As the clock struck midnight on Chaitra Vadi</p>  
    </div>
    <div class="testi-list tr-slide tr-active" data-index="1">
        <p>the kingdom of Pundarikgiri in Mahavideh Kshetra,.</p> 
    </div>
    <div class="testi-list tr-slide" data-index="2">
        <p>3 shetra, a beautiful baby a Taurus on his body was bor</p> 
    </div>
    </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Upvotes: 2

Related Questions