jquery - Index of a class using jQuery

Question

I have a set of a tags that contain the class navLink.

<li><a href="whatever0.html" class="naviLink"><img src="some-image0.jpg" /></a></li>
<li><a href="whatever1.html" class="naviLink"><img src="some-image1.jpg" /></a></li>
<li><a href="whatever2.html" class="naviLink"><img src="some-image2.jpg" /></a></li>

I have another area of the page where it contains the same number of elements (in this case 3). They are in the same order.

<div id="main_navi">
<ul>
<li>Some Content 0</li>
<li>Some Content 1</li>
<li>Some Content 2</li>
</ul>
</div>

The jQuery plugin I'm using automatically makes everything inside #main_navi into links in a carousel type system. When you click the li tag, it scrolls to the image associated with it. I think that behavior is fine.

Here is my issue: My client in their infinite wisdom wants the default behavior to change when you click on the li to take you to the page that corresponds to that image (in this case what is in the whatever.html link.

So far I did this:

$("#main_navi li").click(function() {
  // to find out which li was clicked on
  var index = $(this).index();

  // then i want to grab what url it was referencing..
  alert($('.naviLink').eq(index).attr('href'));
  });

});

However: when I click on the first link Some Content 0, it alerts the url for the last link (whatever2.html). What I'm I doing wrong?

Answer 1

您似乎错过了您的 href 的初始报价。

<li><a href="whatever0.html" class="naviLink"><img src="some-image0.jpg" /></a></li>
<li><a href="whatever1.html" class="naviLink"><img src="some-image1.jpg" /></a></li>
<li><a href="whatever2.html" class="naviLink"><img src="some-image2.jpg" /></a></li>

编辑：这应该涵盖你。

$("#main_navi li").on("click", function() {
    alert($('.naviLink').eq($(this).index()).attr('href'));
});

JSFiddle

Answer 2

它对我不起作用。我的 html 代码是

<input type="button"   class="buttonclose  marleft fleft clrPric" value="X">
<input   type="button"   class="buttonclose  marleft fleft clrPric" value="X"> 
<input type="button"  class="buttonclose  marleft fleft clrPric" value="X">
<input type="button"   class="buttonclose  marleft fleft clrPric" value="X">

我给了 jquery 像 $('.clrPric').click(function(){ console.log($(this).index());});

它在控制台中仅显示 7。此类没有其他元素。我想获取单击按钮的编号。

Answer 3

你可以试试这个

$("#main_nav li").click(function () {
    var index = $(this).index();

$('.naviLink').each(function(index2){

if(index == index2)
{
     alert($(this).attr('href'));
}

});

});