Wie kann ich den Elementtyp eines übereinstimmenden Elements in jQuery ermitteln?

Ich vergleiche mit ASP.Net generierte Elemente anhand des ID-Namens, habe jedoch einige Elemente, die je nach Seitenkontext als Textfelder oder Beschriftungen gerendert werden können. Ich muss herausfinden, ob die Übereinstimmung mit einem Textfeld oder einer Beschriftung besteht, um zu wissen, ob der Inhalt mit val () oder mit html () abgerufen werden soll.

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

Ich habe eine Lösung gefunden, die nicht funktioniert. Sie gibt nur "undefined" zurück:

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

Was vermisse ich?

Nur eine jQuery zu viel:

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

Betrachten Sie diese Lösung ohne jedes () :

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

Schauen Sie sich die Dokumentation für is an .

Sie könnten auch so etwas verwenden:

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

Ersetzen Sie "this" durch eine beliebige Instanz und das Kontrollkästchen durch einen beliebigen Eingabetyp.

Zum ersten Mal habe ich meine eigene Frage beantwortet. Nach etwas mehr Experimentieren:

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

funktioniert!

tagName was für ein schöner tipp. Ich möchte auch die Verwendung von tagName.toLowerCase () vorschlagen, da der zurückgegebene Wert vom Dokumenttyp (HTML oder XML / XHTML) abhängt.

Siehe: http://reference.sitepoint.com/javascript/Element/tagName

in jquery 1.6 benutze prop ()

Beispiel

var el = $('body');

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

Dies ist der beste Weg, um den Elementtyp abzurufen

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() ; 
    }
}

$("[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;
})

Die Frage ist, was beabsichtigen Sie zu tun, nachdem Sie den Tag-Namen festgelegt haben? Sie können die Abfrageliste genauso einfach mit einem zusätzlichen Selektor in Kombination mit .end () filtern, um dasselbe zu tun:

$("[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()

Dies könnte immer noch verkettet sein, wenn Sie weitere Dinge mit dieser speziellen Sammlung von Elementen tun müssten ... genau wie im obigen Beispiel.

In beiden Fällen müssten Sie in den each()Anweisungen etwas mit den Werten tun

Eine weitere, wohl elegantere Lösung besteht darin, zwei separate Funktionen für jeden Elementtyp zu schreiben:

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