1. ホーム
  2. jquery

[解決済み] jQuery - 入力要素がテキストボックスか選択リストかを判断する

2023-02-01 03:14:13

質問

jQueryの:inputフィルターが返す要素がテキストボックスかセレクトリストかを判断するにはどうしたらよいでしょうか?

それぞれ異なる動作をさせたいのですが(textboxはテキスト値を返し、selectはキーとテキストの両方を返します。)

設定例です。

<div id="InputBody">
<div class="box">
    <span id="StartDate">
        <input type="text" id="control1">
    </span>
    <span id="Result">
        <input type="text" id="control2">
    </span>
    <span id="SelectList">
        <select>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
    </span>
</div>
<div class="box">
    <span id="StartDate">
        <input type="text" id="control1">
    </span>
    <span id="Result">
        <input type="text" id="control2">
    </span>
    <span id="SelectList">
        <select>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
    </span>
</div>

と書いて、スクリプトを

$('#InputBody')
    // find all div containers with class = "box"
    .find('.box')
    .each(function () {
        console.log("child: " + this.id);

        // find all spans within the div who have an id attribute set (represents controls we want to capture)
        $(this).find('span[id]')
        .each(function () {
            console.log("span: " + this.id);

            var ctrl = $(this).find(':input:visible:first');

            console.log(this.id + " = " + ctrl.val());
            console.log(this.id + " SelectedText = " + ctrl.find(':selected').text());

        });

どのように解決するのですか?

こうすればいいんです。

if( ctrl[0].nodeName.toLowerCase() === 'input' ) {
    // it was an input
}

または、より遅いですが、より短く、よりきれいな、このような。

if( ctrl.is('input') ) {
    // it was an input
}


より具体的に知りたい場合は、型をテストすることができます。

if( ctrl.is('input:text') ) {
    // it was an input
}