子要素の数をカウントする

Question

下記のようなHTMLで#boxAの子要素の数をカウントしたいのですが
JSの結果なぜか6が帰ってきます。（子要素はoptionのみなので1を期待してるのですが）
原因又は適切な子要素のカウントする方法をご教示を願います。

<select name="box_name_a" style="margin-left:10px; width:160px; height:100px;overflow-x:scroll;" id="boxA" multiple="">
    <option class="opt" id="a" value="c" </option><input type="hidden" name="seltaxA[]" value="d"></select>

 var countA=('#boxA').length;
  alert(countA);

Comments

[masaya_ohashi]

これはjQueryを使う想定ですか？

[SugiuraY]

はい、そのような想定です。

[退会済みユーザー]

補足程度ですが、<select>の子要素には<option>要素または<optgroup>要素しか許可されていません。https://developer.mozilla.org/ja/docs/Web/HTML/Element/select

[SugiuraY]

ご指摘有難うございます。input type="hidden"を入れておりました。select内で動的に生成した複数のoptionを纏めてpostするために使用しておりました。select内から除外いたします。

Answer 1

var countA=('#boxA').length;

まずこれなんですが、jQueryで取ってきた要素の配列のlengthを取っているつもりかもしれませんが、()の前に$が無いので、これはただ単に#boxAという文字列のlengthが取られています(ただ、なぜ6になるのかは不明です。#boxAは5文字なのですが)。

ついでに、jQueryで要素を取るつもりであったとしても、セレクタが間違っています。#boxAの中のoptionの数を数えたいならこうです。

var countA = $('#boxA option').length;

あらゆる子要素(孫要素をカウントしない)の数が知りたいならこうです。

var countA = $('#boxA').children().length;

Comments

[SugiuraY]

コメント有難うございます。
$が抜けていた点はボンミスでございます。失礼致しました。
因みにですが、option以外にもいくつか他の要素がある場合、子要素がいくつあるかを知りたいのですが
var countA = $('#boxA*').length;
でうまくいかないのですが、他に方法はございますでしょうか？
重ねてで申し訳ございませんが宜しくお願い申し上げます。

[SugiuraY]

生のJavascriptで
var countA=document.getElementById('boxA').childElementCount;
でいけるのですがJqueryだとうまい方法が思いつかず、、

[masaya_ohashi]

追記しました。

[masaya_ohashi]

あれ？でもよく見たらinputもあるから期待する数は2ではないですか？

[SugiuraY]

コメント有難うございます。
はい、申し訳ございません。正しくは仰るとおり2です。MutationObserverクラスで動的に生成される要素をカウントしているのですが、変化（増加）するたびに+2ずつ増えていきます。

[SugiuraY]

無事解決しました、有難うございます！

Answer 2

selectタグの中にinputを入れ込んでいるので正しい情報はとれないと思いますが
selectのように中身がoptionだとわかっているような場合はoptionを指定し、
何でもかんでも拾いたいならchildrenを使ってみるとよいでしょう
※optgroupなど挟むと結果はかわってきます

$(function(){
  console.log($('#boxA option').length);
  console.log($('#boxA').children().length);
});

<select id="boxA" multiple>
<optgroup label="xxx">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</optgroup>
<optgroup label="yyy">
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
</optgroup>
</select>

Comments

[SugiuraY]

ご指摘有難うございます。
input hiddenは外に出しました。
またchildren()についても教えて頂き有難うございました。