jQuery: Ajout de deux attributs via le .attr (); méthode

105

ÉDITER:

J'ai appris qu'en utilisant une valeur autre que _blank, NE FONCTIONNE PAS sur les navigateurs mobiles pour ouvrir de nouvelles fenêtres / onglets.

Par exemple, si vous devez ouvrir une nouvelle fenêtre / onglet:

  • Cela fonctionne sur tous les navigateurs, même les navigateurs mobiles: target="_blank".

  • Cela ne fonctionne pas sur les navigateurs mobiles, mais il fonctionne sur les navigateurs de bureau: target="new".

-

Bien que celui-ci fonctionne, je ne suis pas sûr qu'il y ait une meilleure façon de le faire, ou si la façon dont je l'ai obtenue est la bonne / seule façon.

Fondamentalement, ce que je fais est de remplacer toutes les valeurs d'attribut target="_new"ou , de cette façon, une seule nouvelle fenêtre est ouverte et toutes les autres nouvelles fenêtres s'ouvriront afin de ne pas submerger l'utilisateur avec plusieurs fenêtres.target="_blank"target="nw"

J'ajoute également un attribut " Ouvre dans une nouvelle fenêtre " title="".

Donc, la solution que j'ai créée est celle-ci:

$("a[target='_blank'], a[target='_new']").attr('target','nw').attr('title','Opens in a new window');

Notez les deux .attr();méthodes.

Est-ce la bonne façon d'ajouter deux attributs à un élément?

J'ai essayé .attr('target','nw','title','Opens in a new window')mais ça n'a pas marché.

La raison pour laquelle je pose la question est à cause du principe DYR (Don't Repeat Yourself), donc si je peux améliorer le code que j'ai, tant mieux, sinon, c'est ce que c'est.

Merci.

Ricardo Zea
la source
@zzzzBov, oui, vous avez raison, merci pour l'info.
Ricardo Zea
Je voulais définir deux attributs pour avoir la même valeur, c'est donc dommage que .attr('a,b','value')cela ne fonctionne pas. Je me suis installé .attr('a',1).attr('b',1)aussi. Être moins dépendant des nouvelles fenêtres pourrait être une autre approche, dans votre cas, cependant, @ricardozea: P
Alastair

Réponses:

229

Devrait marcher:

.attr({
    target:"nw", 
    title:"Opens in a new window",
    "data-value":"internal link" // attributes which contain dash(-) should be covered in quotes.
});

Remarque :

" Lors de la définition de plusieurs attributs, les guillemets autour des noms d'attributs sont facultatifs.

AVERTISSEMENT : lors de la définition de l'attribut 'class', vous devez toujours utiliser des guillemets!

À partir de la documentation jQuery (septembre 2016) pour .attr :

Tenter de modifier l'attribut type sur un élément d'entrée ou de bouton créé via document.createElement () lèvera une exception sur Internet Explorer 8 ou une version antérieure.

Edit :
Pour référence future ... Pour obtenir un seul attribut que vous utiliseriez

var strAttribute = $(".something").attr("title");

Pour définir un seul attribut que vous utiliseriez

$(".something").attr("title","Test");

Pour définir plusieurs attributs, vous devez tout envelopper dans {...}

$(".something").attr( { title:"Test", alt:"Test2" } );

Modifier - Si vous essayez d'obtenir / de définir l'attribut 'vérifié' à partir d'une case à cocher ...

Vous devrez utiliser à prop() partir de jQuery 1.6+

la méthode .prop () fournit un moyen de récupérer explicitement les valeurs de propriété, tandis que .attr () récupère les attributs.

... le concept le plus important à retenir à propos de l'attribut vérifié est qu'il ne correspond pas à la propriété vérifiée. L'attribut correspond en fait à la propriété defaultChecked et ne doit être utilisé que pour définir la valeur initiale de la case à cocher. La valeur d'attribut cochée ne change pas avec l'état de la case à cocher, tandis que la propriété cochée le fait

Donc, pour obtenir le statut vérifié d'une case à cocher, vous devez utiliser:

$('#checkbox1').prop('checked'); // Returns true/false

Ou pour définir la case à cocher comme cochée ou décochée, vous devez utiliser:

$('#checkbox1').prop('checked', true); // To check it
$('#checkbox1').prop('checked', false); // To uncheck it
Adam Tomat
la source
1
Ah! Ok, c'est ce à quoi je faisais référence. Merci pour l'explication, c'est pourquoi j'ai choisi votre réponse plutôt que celle de Derek. Merci Adam. PS. J'accepterai votre réponse dans 7 minutes, cela ne me laisse pas l'accepter pour le moment.
Ricardo Zea
Correction: vous pouvez changer l'attribut de type dans IE si l'élément est nouvellement créé et pas encore ajouté au DOM.
Akash Kava
Pour définir plusieurs attributs, vous devez tout envelopper dans {...} ... Les clés n'ont-elles pas besoin d'être entre guillemets?
Gcamara14
27

la bonne manière est:

.attr({target:'nw', title:'Opens in a new window'})
Derek
la source
9

Si vous voulez ajouter des attributs bootstrap dans la balise d'ancrage dynamiquement, cela vous aidera beaucoup

 $(".dropdown a").attr({
      class: "dropdown-toggle",
     'data-toggle': "dropdown",
      role: "button",
     'aria-haspopup': "true",
     'aria-expanded': "true"
});
Tejas Soni
la source
2

Quelque chose comme ça:

$(myObj).attr({"data-test-1": num1, "data-test-2": num2});
Jaydeep Patel
la source
1

Utilisez des accolades et mettez tous les attributs que vous souhaitez ajouter à l'intérieur

Exemple:

$('#objId').attr({
    target: 'nw',
    title: 'Opens in a new window'
});
javaprodigy
la source
0
Multiple Attribute

var tag = "tag name";
createNode(tag, target, attribute);

createNode: function(tag, target, attribute){
    var tag = jQuery("<" + tag + ">");
    jQuery.each(attribute, function(i,v){
        tag.attr(v);
    });
    target.append(tag);
    tag.appendTo(target);
}
var attribute = [
    {"data-level": "3"},
];
wonbin
la source
Merci pour votre réponse. Pouvez-vous s'il vous plaît expliquer votre code ou ajouter une démonstration de son fonctionnement ou quelque chose?
Ricardo Zea le