web-dev-qa-db-ja.com

jQueryで一致した要素の要素タイプを判断するにはどうすればよいですか？

ASP.Netで生成された要素をID名で照合していますが、ページコンテキストに応じてテキストボックスまたはラベルとしてレンダリングされる要素がいくつかあります。 val（）またはhtml（）でコンテンツを取得するかどうかを知るために、一致がテキストボックスまたはラベルのどちらであるかを把握する必要があります。

$("[id$=" + endOfIdToMatch + "]").each(function () {
    //determine whether $(this) is a textbox or label
    //do stuff
});

動作しないソリューションが見つかりました。「未定義」を返すだけです。

$("[id$=" + endOfIdToMatch + "]").each(function () {
    alert($(this).tagName);
});

私は何が欠けていますか？

asp.netjavascriptjqueryhtml
72
CMPalmer

たった1つのjQuery：

$("[id$=" + endOfIdToMatch + "]").each(function () {
    alert(this.tagName);
});
92
Tomalak

each（）を使用せずにこのソリューションを検討してください：

var elements = $("[id$=" + endOfIdToMatch + "]");
var vals = elements.is("input").val();
var htmls = elements.is("label").html();
var contents = vals.concat(htmls);

isのドキュメントをご覧ください。

32
Christian Davén

次のようなものも使用できます。

if ($(this).is('input:checkbox'))

「this」を必要なインスタンスに置き換え、「checkbox」を必要な入力タイプに置き換えます。

24
Jelgab

初めて自分の質問に答えました。もう少し実験した後：

$("[id$=" + endOfIdToMatch + "]").each(function () {
   alert($(this).attr(tagName));
});

動作します！

6
CMPalmer

jquery 1.6ではprop（）を使用します

例

var el = $('body');

if (el.prop('tagName') === 'BODY') {
    console.log('found body')
}
3
reco

tagNameなんて素敵なヒント。返される値はドキュメントタイプ（HTMLまたはXML/XHTML）に依存するため、tagName.toLowerCase（）を使用することもお勧めします。

参照： http://reference.sitepoint.com/javascript/Element/tagName

3
Martin Sarsini

これが要素タイプを取得する最良の方法です

function tgetelementType( elmentid )
{

    var TypeName = $('#' + elmentid).get(0).tagName;
    var TypeName2 = $('#' + elmentid).get(0).type;


    if($('#' + elmentid).get(0).tagName== "INPUT")
    {
       return $('#' + elmentid).get(0).type.toUpperCase()
    }
    else 
    {
        return $('#' + elmentid).get(0).tagName.toUpperCase() ; 
    }
}
1
Said
_$("[id$=" + endOfIdToMatch + "]").each(function(){
    var $this=jQuery(this),ri='';
    switch (this.tagName.toLowerCase()){
        case 'label':
            ri=$this.html();
            break;
        case 'input':
            if($this.attr('type')==='text'){ri=$this.val();}
            break;
        default:
            break;
    }
    return ri;
})
_

問題は、タグ名を決定した後、何をするつもりですか？追加のセレクターを.end（）と組み合わせて同じことを行うことで、jqueryリストを簡単にフィルターできます。

_$("[id$=" + endOfIdToMatch + "]")
    .find("input:text")
    .each(function(){
         /* do something with all input:text elements */
    })
    .end()
    .find("label")
    .each(function(){
        /* do something with label elements */
    })
    .end()
_

この特定の要素のコレクションを使用してさらに処理を行う必要がある場合、上記の例のように、これを連鎖させることができます。

いずれの場合でも、each()ステートメント内で値を使用して何かをする必要があります

1
ProtectedVoid

おそらくよりエレガントな別の解決策は、要素タイプごとに2つの別個の関数を記述することです。

$("input#" + id).each(function() { alert(this + " is an input"); });
$("label#" + id).each(function() { alert(this + " is a label"); });
0
jevon