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

72

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?

CMPalmer
quelle

Antworten:

92

Nur eine jQuery zu viel:

$("[id$=" + endOfIdToMatch + "]").each(function () {
    alert(this.tagName);
});
Tomalak
quelle
1
Ohhhhh. Ich verstehe es jetzt. Gute Antwort!
CMPalmer
12
Oder$(this).get(0).tagName
Znarkus
5
@ Znarkus: Stimmt, macht aber keinen Sinn. ;)
Tomalak
2
Nein, in diesem Fall nicht. Aber wenn Sie eine Variable mit einem jQuery-Objekt haben, müssten Sie dies so tun :)
Znarkus
2
Nein. Wenn Sie ein jQuery-Objekt hätten, würden Sie es verwenden $(anything)[0].
Tomalak
32

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 .

Christian Davén
quelle
24

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.

Jelgab
quelle
6

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

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

funktioniert!

CMPalmer
quelle
3
Immer noch eine jQuery zu viel. :-) Sie haben das DOM-Element bereits mit "this", Sie müssen es nicht erneut umbrechen!
Tomalak
3

in jquery 1.6 benutze prop ()

Beispiel

var el = $('body');

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

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

ProtectedVoid
quelle
0

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"); });
jevon
quelle