web-dev-qa-db-fra.com

Comment puis-je déterminer le type d'élément d'un élément correspondant dans jQuery?

Je fais correspondre les éléments générés par ASP.Net par nom d'ID, mais certains éléments peuvent être affichés sous forme de zones de texte ou d'étiquettes en fonction du contexte de la page. Je dois déterminer si la correspondance est une zone de texte ou une étiquette afin de savoir si le contenu doit être obtenu par val () ou par html ().

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

J'ai trouvé une solution qui ne fonctionne pas, elle renvoie simplement "undefined":

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

Qu'est-ce que je rate?

asp.netjavascriptjqueryhtml
71
CMPalmer

Juste un jQuery de trop:

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

Considérez cette solution sans utiliser each ():

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

Consultez la documentation de is.

32
Christian Davén

vous pouvez aussi utiliser quelque chose comme ceci:

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

remplacez "this" par l'instance dont vous avez besoin et "case à cocher" par le type d'entrée dont vous avez besoin.

24
Jelgab

La première fois que j'ai répondu à ma propre question. Après un peu plus d'expérimentation:

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

travaux!

6
CMPalmer

dans jquery 1.6, utilisez prop ()

Exemple

var el = $('body');

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

tagName quel bon conseil. Je voudrais également suggérer d'utiliser tagName.toLowerCase () car la valeur renvoyée dépend du type de document (HTML ou XML/XHTML).

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

3
Martin Sarsini

C'est le meilleur moyen d'obtenir le type d'élément

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

La question est de savoir ce que vous avez l'intention de faire après avoir déterminé le nom de la balise. Vous pouvez tout aussi facilement filtrer la liste de requêtes en utilisant un sélecteur supplémentaire associé à .end () pour faire la même chose:

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

Cela pourrait toujours être enchaîné si vous aviez besoin de faire plus de choses avec cette collection d'éléments particulière ... comme dans l'exemple ci-dessus.

Dans les deux cas, vous devez utiliser les valeurs dans les instructions each().

1
ProtectedVoid

Une autre solution, sans doute plus élégante, consiste à écrire deux fonctions distinctes pour chaque type d'élément:

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