7

例えば、name属性がtitleであるinputタグを内包しているliタグは、ulタグ内で何番目に位置するか という情報を取得したいとき、どのようなJavaScriptを記述すれば実現できるのか良いアイディアが出ません。

どなたかご教授いただければ幸いです。

<ul>
    <li><input type="text" name="title"></li>
    <li><input type="number" name="price"></li>
    <li>
        <select name="number">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
    </li>
</ul>

4 件の回答 4

6

タグに jquery がありましたので、jQuery使用のコードで回答いたします。

var i = $('input[name=title]').parent('li').index();

これで i に何番目か入ることになります。 i は 0 から始まることに注意してください。

参考コード: http://jsdo.it/blueberrystream/hT9GInternet Archive

1
  • 皆様、様々なアプローチを提示していただきありがとうございました。ベストアンサーに悩みましたが、示していただいた中で KID the Euforia さんのコードの実行速度が最速であったため、こちらをベストアンサーとさせて頂きました。 Commented 2015年1月7日 12:01
3

has使ったら直感的かなぁと:

$('li:has(input[name=title])').index();
2

jQueryを使うのであれば、

$('input[name=title]').closest('li').index()

で良いかと

2
  1. input 要素を取るのは、 document.querySelector('ul>li>input[name="title"]'); 
  2. 要素が、親からみて何番目かは、[].indexOf.call(NODE.parentNode.children, NODE)

以下のようにできます:

// 準備: price を値に持つ input を取る
var input = document.querySelector('ul>li>input[name="price"]');
var li = input.parentNode

// その li は ul の何番目にありますか?
var count = [].indexOf.call(li.parentNode.children, li);

window.alert( count) // => 1

一般的なブラウザ(Chrome, Firefox 3.5+, IE 9+)であれば、 querySelector() は用意されています。

追記:

無駄に煮詰まったので:

var input = document.querySelector('ul>li>input[name="price"]');
var li = input.parentNode

var i = 0; while((li = li.previousElementSibling) != null) i++;
window.alert( i) // => 1

jQuery は、.previousSibling を使っていますね。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。