jQuery - получение индекса элемента, ограниченного классом

ProgramBox

jQuery — получение индекса элемента, ограниченного классом

Post author:admin
Запись опубликована:16 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

Учитывая следующий html:

 <div class="my-container">
    <div class="x">
        <a href="#">Link 1</a>
    </div>
    <div class="x">
        <a href="#">Link 2</a>
    </div>
    <div class="x">
        <a href="#">Link 3</a>
    </div>
    <div class="x y">
        <a href="#">Link 4</a>
    </div>
    <div class="x">
        <a href="#">Link 5</a>
    </div>
    <div class="x y">
        <a href="#">Link 6</a>
    </div>
    <div class="x">
        <a href="#">Link 7</a>
    </div>
</div>

Какие элементы получают y класс — это динамическая вещь, которая меняется во время выполнения на основе различных взаимодействий с пользователем.

Наведя курсор мыши на якорь (я могу предположить, что якорь находится в div с y классом, потому что видны только они), мне нужно получить индекс его контейнера (этого div с y классом), но ограниченный этим y классом.

Значение:

наведение курсора мыши на «Ссылку 4» должно подсказать мне: 0 (первый элемент с классом y )
наведение курсора мыши на «Ссылку 6» должно сообщить мне: 1 (второй элемент с классом y )

.index() мне здесь не помогает

РЕДАКТИРОВАТЬ: @Kevin B Я прочитал документы, но не смог заставить их работать. Самое близкое, что я мог там найти, это передать коллекцию .index() , которую я пробовал. Но не сработало (кроме того, их пример для коллекции — с ванильным js document.getElementById — у меня это не сработало, нужно работать с классами; пытался адаптировать: MyCollection = $(this).closest(‘.my-container’).children(‘.y’) и передал это .index() , и это не сработало). Я бы не стал публиковать без предварительного поиска в Google, а также просматривать документы, не знаю, почему голосование против (не указывая пальцами, я не предполагаю, что знаю, кто это). Только потому, что я сказал «.index()» мне не помогает»? Ну, я попробовал все, что, как я понял, я мог с этим сделать, и не смог этого добиться. Вот почему я опубликовал.

1. «.index() мне здесь не помогает» Вы уверены? вы читали документацию по указанному методу? похоже, что это сработает.

2. index() это именно то, что вам нужно: $(this).index('.y a') где this находится a элемент, который вызвал событие mouseenter

3. Звучит как проблема XY : «Мне нужно получить индекс» .. не так ли? Вам, вероятно, не нужен индекс , если это не какой-то производный сценарий / техническое упражнение, не относящееся к реальному миру. Дайте каждому контейнеру ‘data-idx =’ с фактическим значением, которое ему нужно, и используйте $(this).closest("div.y").data("idx")

4. Я прочитал документы, но не смог заставить его работать. Самое близкое, что я мог там найти, это передать коллекцию .index() , которую я пробовал. Но не сработало (кроме того, их пример для коллекции — с ванильным js document.getElementById — у меня это не сработало; пытался адаптироваться и не смог заставить его работать). Я бы не стал публиковать, не просмотрев документы и не выполнив сначала поиск, не знаю, почему голосование «против». Только потому, что я сказал «.index()» мне не помогает»?

5. @freedomn-m — это не теория, зачем мне терять на это время? 🙂 У меня есть горизонтальный список, и при наведении курсора мыши на элементы, имеющие y класс, мне нужно применить эффект, эффект, который отличается y от того, является ли это первым элементом класса или последним. Итак, 3 эффекта: первый, последний и любой промежуточный. Единственное, что я «добавил» здесь, подразумевало, что y элементы моего класса не обязательно следуют один за другим, но в реальном сценарии они всегда следуют друг за другом. Здесь все просто, поэтому я не буду загрязнять слишком много html. И у меня есть больше семантических классов, чем x и y и my-container

Ответ №1:

Как сказано в комментариях, индекс — это именно то, что вам нужно:

 $(document).ready(function() {
  //mousein
  $("a").hover(function(){
     var parent = $('.my-container').eq(2); // the 3rd "my-container"
     console.log(parent.find('.y a').index(this)); //-1 if elm doesnt exist
  },
  //mouseout
  function(){

  })
});

1. Это работает! Учитывая, что я выбираю своего родителя по-другому, а не с .eq(n) помощью — но это был всего лишь пример, конечно. И я, конечно, на самом деле уже знаю, в каком я «родителе». parent.find('.y a')index(this) это, безусловно, то, что делает работу. Спасибо!

Ответ №2:

Как сказано в комментариях, индекс — это именно то, что вам нужно:

 $(document).ready(function() {
  //mousein
  $("a").hover(function(){
     console.log($(this).index('.y a')); //-1 if elm doesnt exist
  },
  //mouseout
  function(){

  })
});

1. Я не знаю, кто здесь профессиональный избиратель… И почему? Я только что протестировал ваш ответ, и он работает. У кого-нибудь есть объяснение, почему это было бы плохим подходом? Есть ли лучший вариант?

2. Хотя… У меня их несколько <div class="my-container"></div> на моей странице. Это работает только для первого.

Ответ №3:

 var count = 1;
$(".my-container div").on('mouseover',function(){
  if ($(this).attr("class").indexOf('y') > -1){
      alert(count   "th mouseover on y class");
      count  ;
  }
})

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-container">
    <div class="x">
        <a href="#">Link 1</a>
    </div>
    <div class="x">
        <a href="#">Link 2</a>
    </div>
    <div class="x">
        <a href="#">Link 3</a>
    </div>
    <div class="x y">
        <a href="#">Link 4</a>
    </div>
    <div class="x">
        <a href="#">Link 5</a>
    </div>
    <div class="x y">
        <a href="#">Link 6</a>
    </div>
    <div class="x">
        <a href="#">Link 7</a>
    </div>
</div>