主页 / 问题 / 969388
Accepted
spoon 100500
Asked:2020-04-14 13:07:53 +0000 UTC2020-04-14 13:07:53 +0000 UTC

从集合中获取元素的索引

  • 772

从集合中获取元素的索引

$('.dop').on('click',function(){
var in = $(this).closest('[class^="col-"]').index();
$('#in').text(in);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="row">
  <div class="col-1">
    <div id="wb1">
      <img src="" class="dop">
    </div>
  </div>
  <div class="col-2">
    <div id="wb2">
      <img src="" class="dop">
    </div>
  </div>
  <div class="col-3">
    <div id="wb3">
      <img src="" class="dop">
    </div>
  </div>
  <div class="col-4">
    <div id="wb4">
      <img src="" class="dop">
    </div>
  </div>
  <div class="col-5">
    <div id="wb5">
      <img src="" class="dop">
    </div>
  </div>
  <div class="col-6">
    <div id="wb6">
      <img src="" class="dop">
    </div>
  </div>
</div>
<div id="in"></div>

javascript

1 个回答

  1. Best Answer

    首先，不清楚为什么要接收.row以便以后查找[class^="col-"]。你可以马上$(this).closest('[class^="col-"]')。其次，如果每一列中都有一个具有“dop”类的元素，为什么要这样做，这意味着点击图像的索引将匹配封闭列的索引。第三，如果这些是引导类，那么你已经打破了网格，列的总宽度不能超过 12。第四：

    var div = $('#in');
var items = $('.dop');
items.on('click', function() {
  div.text(items.index(this) + 1);
});
    .dop {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  margin: 10px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="row">
  <div class="col-1">
    <div id="wb1">
      <img src="" class="dop">
    </div>
  </div>
  <div class="col-2">
    <div id="wb2">
      <img src="" class="dop">
    </div>
  </div>
  <div class="col-3">
    <div id="wb3">
      <img src="" class="dop">
    </div>
  </div>
  <div class="col-4">
    <div id="wb4">
      <img src="" class="dop">
    </div>
  </div>
  <div class="col-5">
    <div id="wb5">
      <img src="" class="dop">
    </div>
  </div>
  <div class="col-6">
    <div id="wb6">
      <img src="" class="dop">
    </div>
  </div>
</div>
<div id="in"></div>

    • 2

相关问题