Question

我有html如下。

<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>

我想获得活动div（即tr-active类），然后想要访问属性'data-index'的值。我们怎么能用jquery做到这一点？

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

以上行无效。

Answer 1

试试这个你可以像$('.testi-list.tr-active').attr('data-index');

那样做

＆＃13;

$(function(){

var i = $('.tr-active').attr('data-index');

alert(i);
});

＆＃13;

	<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>

＆＃13;

Answer 2

你的HTML应该是这样的..

<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 类超出了引号，因此它充当了属性。

也可以使用它来查找数据索引

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

Answer 3

$(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>

Answer 4

这将为您完成工作

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

演示：https://jsfiddle.net/rhsxfmcL/

Answer 5

从数据属性找到解决方案。

<!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>

获取属性值

5 个答案: