jQuery: Adicionando dois atributos por meio do .attr (); método

104

EDITAR:

Aprendi que usar outro valor além de _blankNÃO funciona em navegadores móveis para abrir novas janelas / guias.

Por exemplo, se você precisar abrir uma nova janela / guia:

  • Isso funciona em todos os navegadores, mesmo navegadores móveis: target="_blank".

  • Isso não funciona em navegadores móveis, mas não funciona em navegadores de desktop: target="new".

-

Embora eu tenha este funcionando, não tenho certeza se há uma maneira melhor de fazer isso, ou se a forma como consegui é a única maneira certa.

Basicamente, o que estou fazendo é substituir todos os valores de atributo target="_new"ou target="_blank"para target="nw", desta forma apenas uma nova janela é aberta e nela todas as outras novas janelas serão abertas para não sobrecarregar o usuário com várias janelas.

Também estou adicionando um atributo " Abre em uma nova janela " title="".

Portanto, a solução que criei é esta:

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

Observe os dois .attr();métodos.

Esta é a maneira correta de adicionar dois atributos a um elemento?

Eu tentei, .attr('target','nw','title','Opens in a new window')mas não funcionou.

A razão de eu perguntar é por causa do princípio DYR (Don't Repeat Yourself), então se eu puder melhorar o código que tenho, ótimo, se não, então é o que é.

Obrigado.

Ricardo Zea
fonte
@zzzzBov, sim, você está certo, obrigado pela informação.
Ricardo Zea,
Eu queria definir dois atributos para ter o mesmo valor, então é uma pena .attr('a,b','value')que não funcione. Eu também resolvi .attr('a',1).attr('b',1). Ser menos dependente de novas janelas pode ser outra abordagem, no seu caso, @ricardozea: P
Alastair

Respostas:

228

Deveria trabalhar:

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

Nota :

" Ao definir vários atributos, as aspas em torno dos nomes dos atributos são opcionais.

AVISO : Ao definir o atributo 'class', você deve sempre usar aspas!

Da documentação da jQuery (setembro de 2016) para .attr :

A tentativa de alterar o atributo type em um elemento de entrada ou botão criado por meio de document.createElement () lançará uma exceção no Internet Explorer 8 ou anterior.

Edit :
Para referência futura ... Para obter um único atributo que você usaria

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

Para definir um único atributo que você usaria

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

Para definir vários atributos, você precisa envolver tudo em {...}

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

Editar - Se você está tentando obter / definir o atributo 'verificado' em uma caixa de seleção ...

Você precisará usar a prop() partir do jQuery 1.6+

o método .prop () fornece uma maneira de recuperar explicitamente os valores das propriedades, enquanto .attr () recupera os atributos.

... o conceito mais importante a lembrar sobre o atributo marcado é que ele não corresponde à propriedade marcada. O atributo realmente corresponde à propriedade defaultChecked e deve ser usado apenas para definir o valor inicial da caixa de seleção. O valor do atributo marcado não muda com o estado da caixa de seleção, enquanto a propriedade marcada

Portanto, para obter o status verificado de uma caixa de seleção, você deve usar:

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

Ou para definir a caixa de seleção como marcada ou desmarcada, você deve usar:

$('#checkbox1').prop('checked', true); // To check it
$('#checkbox1').prop('checked', false); // To uncheck it
Adam Tomat
fonte
1
Aha! Ok, é a isso que me referia. Obrigado pela explicação, é por isso que escolhi sua resposta em vez de Derek. Obrigado Adam. PS. Aceitarei sua resposta em 7 minutos, não está me permitindo aceitar agora.
Ricardo Zea,
Correção: você pode alterar o atributo de tipo no IE se o elemento for recém-criado e ainda não adicionado ao DOM.
Akash Kava
Para definir vários atributos, você precisa envolver tudo em {...} ... As chaves não precisam estar entre aspas?
Gcamara14
27

a maneira correta é:

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

Se você quiser adicionar atributos de bootstrap na tag âncora dinamicamente, isso irá ajudá-lo muito

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

Algo assim:

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

Use chaves e coloque todos os atributos que deseja adicionar dentro

Exemplo:

$('#objId').attr({
    target: 'nw',
    title: 'Opens in a new window'
});
javaprodigy
fonte
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
fonte
Obrigado pela sua resposta. Você pode explicar seu código ou adicionar uma demonstração dele funcionando ou algo assim?
Ricardo Zea