4245


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

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

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2015-01-07T11:14:27.977
4241
2019-10-17T11:11:43.773
5827
question
javascript jquery html html5
あるhtmlタグについて、それを内包しているタグから見た時に何番目の位置に存在しているのか知りたい


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

以下のようにできます:

[code]

    // 準備: 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
    
[/code]

一般的なブラウザ(Chrome, Firefox 3.5+, IE 9+)であれば、
[`querySelector()`](https://developer.mozilla.org/en/docs/Web/API/Document.querySelector)
は用意されています。

**追記:**

無駄に煮詰まったので:

[code]

    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
    
[/code]

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


CC BY-SA 3.0
2015-01-07T11:34:13.743
4243
2015-01-07T13:39:41.887
2015-01-07T13:39:41.887
4978
4978
4241
answer


jQueryを使うのであれば、

[code]

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

で良いかと


CC BY-SA 3.0
2015-01-07T11:35:11.570
4244
2015-01-07T11:35:11.570
5750
4241
answer


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

[code]

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

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

参考コード: <http://jsdo.it/blueberrystream/hT9G> （[Internet
Archive](https://web.archive.org/web/20191017111040/http://jsdo.it/blueberrystream/hT9G)）


CC BY-SA 4.0
2015-01-07T11:38:49.713
4245
2019-10-17T11:11:43.773
2019-10-17T11:11:43.773
19110
3160
4241
answer


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

[code]

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


CC BY-SA 3.0
2015-01-07T11:49:52.380
4246
2015-01-07T11:49:52.380
62
4241
answer