获取被点击元素的部分索引

Felix 发表于 Dev

菲利克斯

在我的网站中，我需要获取点击元素部分的索引。

有一个<div>有多个<section>，每个都有一个<ul>。每个部分都有自己独特的部分标题。

如果您单击一个列表元素，该类将从listFUTItem has-auction-data变为listFUTItem has-auction-data active（尝试在操场上重建它）。

在<div>只有一个列表元素可以同时处于活动状态。（不是在这个剪辑上工作，而是在网站上工作）

目前我的代码是这样工作的：itemList = document.querySelectorAll('.sectioned-item-list > ul')[2]但索引必须是可变的。

$('.listFUTItem').click(function() {
  $(this).siblings().filter('.active').removeClass('active');
  $(this).addClass('listFUTItem has-auction-data active');
  console.log( $('.listFUTItem.has-auction-data').index(this) );
});

.active {
  background: #00FF00;
}
.ut-section-header-view {
    padding: .75rem .5rem;
    background-color: #f2f2f2;
    box-sizing: border-box;
    display: flex;
    font-family: sans-serif;
    overflow: hidden;
    text-transform: uppercase;
}
.listFUTitem {
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="transferlist" style="height: calc(100% - 2.5rem); width: calc(100% - 350px);">
<section class="sectioned-item-list>
<header class="ut-section-header-view">
<h2>Unsold Items</h2>
</header>
<ul class="paginated">
  <li class="listFUTItem has-auction-data"> Ballack</li>
  <li class="listFUTItem has-auction-data"> Lehmann</li>
  <li class="listFUTItem has-auction-data"> Pique</li>
  <li class="listFUTItem has-auction-data"> Kroos</li>
  <li class="listFUTItem has-auction-data"> Owen</li>
</ul>
<section class="sectioned-item-list>
<header class="ut-section-header-view">
<h2>Sold Items</h2>
</header>
<ul class="paginated">
  <li class="listFUTItem has-auction-data"> Ballack</li>
  <li class="listFUTItem has-auction-data"> Lehmann</li>
  <li class="listFUTItem has-auction-data"> Pique</li>
  <li class="listFUTItem has-auction-data"> Kroos</li>
  <li class="listFUTItem has-auction-data"> Owen</li>
</ul>
</div>
<section class="sectioned-item-list>
<header class="ut-section-header-view">
<h2>Available Items</h2>
</header>
<ul class="paginated">
  <li class="listFUTItem has-auction-data"> Ballack</li>
  <li class="listFUTItem has-auction-data"> Lehmann</li>
  <li class="listFUTItem has-auction-data"> Pique</li>
  <li class="listFUTItem has-auction-data"> Kroos</li>
  <li class="listFUTItem has-auction-data"> Owen</li>
</ul>
</div>
<section class="sectioned-item-list>
<header class="ut-section-header-view">
<h2>Unsold Items</h2>
</header>
<ul class="paginated">
  <li class="listFUTItem has-auction-data"> Ballack</li>
  <li class="listFUTItem has-auction-data"> Lehmann</li>
  <li class="listFUTItem has-auction-data"> Pique</li>
  <li class="listFUTItem has-auction-data"> Kroos</li>
  <li class="listFUTItem has-auction-data"> Owen</li>
</ul>
</div>

查理特

用于closest()在<section>该类的所有部分的集合中遍历并获取它的索引

const $sections = $('.sectioned-item-list');

$('.listFUTItem').click(function() {     
  const $sect  = $(this).closest('.sectioned-item-list'); 
  const sectIndex = $sections.index($sect);
  console.log(sectIndex)
});

.active {
  background: #00FF00;
}
.ut-section-header-view {
    padding: .75rem .5rem;
    background-color: #f2f2f2;
    box-sizing: border-box;
    display: flex;
    font-family: sans-serif;
    overflow: hidden;
    text-transform: uppercase;
}
.listFUTitem {
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="transferlist" style="height: calc(100% - 2.5rem); width: calc(100% - 350px);">
<section class="sectioned-item-list">
<header class="ut-section-header-view">
<h2>Unsold Items</h2>
</header>
<ul class="paginated">
  <li class="listFUTItem has-auction-data"> Ballack</li>
  <li class="listFUTItem has-auction-data"> Lehmann</li>
  <li class="listFUTItem has-auction-data"> Pique</li>
  <li class="listFUTItem has-auction-data"> Kroos</li>
  <li class="listFUTItem has-auction-data"> Owen</li>
</ul>
<section class="sectioned-item-list">
<header class="ut-section-header-view">
<h2>Sold Items</h2>
</header>
<ul class="paginated">
  <li class="listFUTItem has-auction-data"> Ballack</li>
  <li class="listFUTItem has-auction-data"> Lehmann</li>
  <li class="listFUTItem has-auction-data"> Pique</li>
  <li class="listFUTItem has-auction-data"> Kroos</li>
  <li class="listFUTItem has-auction-data"> Owen</li>
</ul>
</div>
<section class="sectioned-item-list">
<header class="ut-section-header-view">
<h2>Available Items</h2>
</header>
<ul class="paginated">
  <li class="listFUTItem has-auction-data"> Ballack</li>
  <li class="listFUTItem has-auction-data"> Lehmann</li>
  <li class="listFUTItem has-auction-data"> Pique</li>
  <li class="listFUTItem has-auction-data"> Kroos</li>
  <li class="listFUTItem has-auction-data"> Owen</li>
</ul>
</div>
<section class="sectioned-item-list">
<header class="ut-section-header-view">
<h2>Unsold Items</h2>
</header>
<ul class="paginated">
  <li class="listFUTItem has-auction-data"> Ballack</li>
  <li class="listFUTItem has-auction-data"> Lehmann</li>
  <li class="listFUTItem has-auction-data"> Pique</li>
  <li class="listFUTItem has-auction-data"> Kroos</li>
  <li class="listFUTItem has-auction-data"> Owen</li>
</ul>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。