Блог

Главная - Вопросы по программированию - Получить индекс раздела выбранного элемента

Получить индекс раздела выбранного элемента

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

На моем веб-сайте мне нужно получить индекс раздела выбранных элементов.

Есть один, <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>

Ответ №1:

Используйте 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>

Ответ №2:

Для этого вы могли бы использовать jQuery parents . Используется $('.transferlist section ul li.active').removeClass('active') для удаления .active класса из всех активных элементов списка. Запустите следующий фрагмент, чтобы проверить результат:

 $(this).index();

против

 $(".listFUTItem.has-auction-data").index(this);
  

 $('.listFUTItem').click(function() {
  $('.transferlist section ul li.active').removeClass('active');
  $(this).addClass('listFUTItem has-auction-data active');
  console.clear();
  console.log('$(this).index() value is ->t'   $(this).index());
  console.log('$(this).parents("section").index() value is ->t'   $(this).parents("section").index());
  console.log('$(".listFUTItem.has-auction-data").index(this) value is ->t'   $('.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>
  <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>
  </section>
  <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>
  </section>
  <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>
</div>