0

リンク名に示されているインデックスによって、 a 内のタグのみを選択したい。これを行う最良の方法は何ですか？

<div class="index-get">
    <div class="column">
        <a href="#">Category Title</a>
        <ul>
            <li><a href="#">Index 0</a></li>
            <li><a href="#">Index 1</a></li>
            <li><a href="#">Index 2</a></li>
            <li><a href="#">Index 3</a></li>
            <li><a href="#">Index 4</a></li>
        </ul>
    </div>
    <div class="column">
        <ul>
            <li><a href="#">Index 5</a></li>
            <li><a href="#">Index 6</a></li>
            <li><a href="#">Index 7</a></li>
            <li><a href="#">Index 8</a></li>
            <li><a href="#">Index 9</a></li>
        </ul>
    </div>
</div>

$('.index-get ul a').click(function(){

    var aIndex = $(this).index();
    console.log(aIndex);

});
4

4 に答える 4

1 
 var aIndex = $('.index-get li a').index($(this));

$('.index-get li a')イベントハンドラーの外でキャッシュする必要があります

var $lia = $('.index-get li a');

$lia.on('click',function() {

       console.log($lia.index($(this)));

    })
于 2013-10-08T09:54:03.907 に答える
0

質問が十分に明確かどうかはわかりませんが、必要なものに関連する可能性のあるものを次に示します。

$('.index-get ul a').click(function(){
    var aIndex = $(this).text();
    console.log(aIndex);
});

そしてフィドル。

編集

私は最終的に質問のため息を得たと思います... :-) 各親LI内にはAが1つしかないため、インデックスは兄弟に関連しているため、この例ではAタグのインデックスは常に0になります...

LI のインデックスを計算すると、より良い結果が得られる場合があります。ただし、インデックスは各親内でのみカウントされるため、2 つの UL では LI 子の 2 つのセットが取得されるため、インデックス 1 またはインデックス 6 をクリックしても同じ結果が得られることに注意してください。

新しいフィドル

もう1つの編集

実際には、UL は兄弟でもなく、前の項目の LI をカウントできるようにするには、DIV の上に移動し、UL に再度下に移動する必要があります...しかし、それはあなたのニーズにぴったり合っていると思います。私はあなたのニーズを理解しました... ;-)

$('.index-get ul li').click(function(){
    var aIndex = $(this).index()+$(this).parent().parent().prev().find("ul").children().length;
    console.log(aIndex);
});

そしてフィドル。

最終編集 ラインを少しシンプルにする

var aIndex = $(this).index() + $(this).parent().parent().prev().find("ul li").length;

  • &(this) は LI 要素です。

  • $(this).parent() はULです

  • $(this).parent().parent() はDIVです

  • $(this).parent().parent().prev() は、その DIV のすべての兄弟要素です (うまくいけば、そこには DIV のみがあり、すべてが同じタイプのコンテンツを持っています)。

  • $(this).parent().parent().prev().find("ul li") 兄弟 DIV 内の UL 内のすべての LI。

  • $(this).parent().parent().prev().find("ul li").length; 前の行の LI の数。

ほらね。シンプルなロジック！;-)

そして、すべてが終わって落ち着いたと思ったら... もう1つ編集があります!!! :-)

私が提案した解決策を考えていましたが、2 つ以上の UL グループがあり、3 番目以降の UL にある LI をクリックすると、最終的に失敗します。

したがって、.prev() の代わりに .prevAll() を使用するさらに別のソリューションを作成しましたが、関数で .each() を使用して、以前の UL からのすべての LI 要素のすべてのカウントを合計する必要があります。

フィドル

これで安心して寝れます！:-)

ファブリシオ

于 2013-10-08T09:52:09.327 に答える
0

このコードを試してください：

$('.index-get ul a').click(function(){
    var aIndex = $(this).text().match(/\d+$/)[0];
    console.log(aIndex);
});
于 2013-10-08T10:09:52.247 に答える
0

これは、li がどれだけ深くネストされていても機能するはずです。

var items = $('li');

items.on('click', function() {
  var clicked_item = $(this);
  
  items.each(function(index){
    if ($(this).is(clicked_item)){
      console.log(index);
    } 
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="index-get">
    <div class="column">
        <a href="#">Category Title</a>
        <ul>
            <li><a href="#">Index 0</a></li>
            <li><a href="#">Index 1</a></li>
            <li><a href="#">Index 2</a></li>
            <li><a href="#">Index 3</a></li>
            <li><a href="#">Index 4</a></li>
        </ul>
    </div>
    <div class="column">
        <ul>
            <li><a href="#">Index 5</a></li>
            <li><a href="#">Index 6</a></li>
            <li><a href="#">Index 7</a></li>
            <li><a href="#">Index 8</a></li>
            <li><a href="#">Index 9</a></li>
        </ul>
    </div>
</div>

于 2016-08-24T01:07:07.843 に答える