从循环中获取元素id

Question

我有循环，我需要在点击i标签内的fa-star类时获取数据ID，但是当我尝试这样做时，我总是只从第一行获取id，而不是从我点击的内容。

<div data-id="1" class="companies-list-item-rating">
    <i data-rate="1" class="fa fa-star-o"></i>
    <i data-rate="2" class="fa fa-star-o"></i>
    <i data-rate="3" class="fa fa-star-o"></i>
    <i data-rate="4" class="fa fa-star-o"></i>
    <i data-rate="5" class="fa fa-star-o"></i>
    <span class="companies-list-item-rating-count">/ 7</span>
</div><!-- /.companies-list-item-rating -->

<div data-id="2" class="companies-list-item-rating">
    <i data-rate="1" class="fa fa-star-o"></i>
    <i data-rate="2" class="fa fa-star-o"></i>
    <i data-rate="3" class="fa fa-star-o"></i>
    <i data-rate="4" class="fa fa-star-o"></i>
    <i data-rate="5" class="fa fa-star-o"></i>
    <span class="companies-list-item-rating-count">/ 3</span>
</div><!-- /.companies-list-item-rating -->

$('.fa-star-o').click(function() {
    var object_id = $('.companies-list-item-rating').data('id');
    alert(object_id);
});

Answer 1

使用this引用处理程序中的被点击元素，然后使用 closest() 或 parent() 方法获取div。 / p>

＆＃13;

＆＃13;

$('.fa-star-o').click(function() {
  var object_id = $(this).closest('.companies-list-item-rating').data('id');
  // or var object_id = $(this).parent().data('id');
  alert(object_id);
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-id="1" class="companies-list-item-rating">
  <i data-rate="1" class="fa fa-star-o"></i>
  <i data-rate="2" class="fa fa-star-o"></i>
  <i data-rate="3" class="fa fa-star-o"></i>
  <i data-rate="4" class="fa fa-star-o"></i>
  <i data-rate="5" class="fa fa-star-o"></i>
  <span class="companies-list-item-rating-count">/ 7</span>
</div>
<!-- /.companies-list-item-rating -->

<div data-id="2" class="companies-list-item-rating">
  <i data-rate="1" class="fa fa-star-o"></i>
  <i data-rate="2" class="fa fa-star-o"></i>
  <i data-rate="3" class="fa fa-star-o"></i>
  <i data-rate="4" class="fa fa-star-o"></i>
  <i data-rate="5" class="fa fa-star-o"></i>
  <span class="companies-list-item-rating-count">/ 3</span>
</div>
<!-- /.companies-list-item-rating -->

＆＃13;

＆＃13;

＆＃13;

Answer 2

通过closest()函数使用companies-list-item-rating找到与您点击的位置相近的$(this)元素：

$('.fa-star-o').click(function() {
   // This will find the nearest matching element
   var object_id = $(this).closest('.companies-list-item-rating').data('id');
   alert(object_id);
});

您之前的方法只是尝试使用companies-list-item-rating类找到第一个元素，并且每次都使用它的data-id属性。使用$(this).closest(...)将遍历DOM，直到找到您需要的内容。

示例

$('.fa-star-o').click(function() {
  var object_id = $(this).closest('.companies-list-item-rating').data('id');
  console.log(object_id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<div data-id="1" class="companies-list-item-rating">
  <i data-rate="1" class="fa fa-star-o"></i>
  <i data-rate="2" class="fa fa-star-o"></i>
  <i data-rate="3" class="fa fa-star-o"></i>
  <i data-rate="4" class="fa fa-star-o"></i>
  <i data-rate="5" class="fa fa-star-o"></i>
  <span class="companies-list-item-rating-count">/ 7</span>
</div>
<!-- /.companies-list-item-rating -->

<div data-id="2" class="companies-list-item-rating">
  <i data-rate="1" class="fa fa-star-o"></i>
  <i data-rate="2" class="fa fa-star-o"></i>
  <i data-rate="3" class="fa fa-star-o"></i>
  <i data-rate="4" class="fa fa-star-o"></i>
  <i data-rate="5" class="fa fa-star-o"></i>
  <span class="companies-list-item-rating-count">/ 3</span>
</div>
<!-- /.companies-list-item-rating -->

Answer 3

您可以使用 .attr（）获取任何属性， nearest（）将遍历并获取此类的最近元素

$('.fa-star-o').click(function() {
  var object_id = $(this).closest('.companies-list-item-rating').attr('data-id');
});