131

EDIT:

I learned that using other value than _blank, DOES NOT work on mobile browsers to open new windows/tabs.

For example, if you need to open a new window/tab:

  • This works on all browsers, even mobile browsers: target="_blank".

  • This does not work on mobile browsers, but it does work on desktop browsers: target="new".

--

Although I have this one working, I'm not sure if there's a better way to do it, or if the way I got it is the right/only way.

Basically what I'm doing is replacing all the target="_new" or target="_blank" attribute values to target="nw", this way only one new window is open and in it all other new windows will open in order to not overwhelm the user with multiple windows.

I'm also adding a "Opens in a new window" title="" attribute.

So the solution I created is this one:

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

Notice the two .attr(); methods.

Is this the correct way to add two attributes to an element?

I tried .attr('target','nw','title','Opens in a new window') but it didn't work.

The reason I ask is because of the DYR (Don't Repeat Yourself) principle, so if I can improve the code I have, great, if not, then it is what it is.

Thanks.

Improve this question
1
  • I wanted to set two attributes to have the same value so it's a shame .attr('a,b','value') doesn't work. I settled on .attr('a',1).attr('b',1), as well. Being less reliant on new windows might be another approach, in your case, though, @ricardozea :P Commented Dec 10, 2014 at 1:52

6 Answers 6

Reset to default
283

Should work:

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

Note:

" When setting multiple attributes, the quotes around attribute names are optional.

WARNING: When setting the 'class' attribute, you must always use quotes!

From the jQuery documentation (Sep 2016) for .attr:

Attempting to change the type attribute on an input or button element created via document.createElement() will throw an exception on Internet Explorer 8 or older.

Edit:
For future reference... To get a single attribute you would use

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

To set a single attribute you would use

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

To set multiple attributes you need to wrap everything in { ... }

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

Edit - If you're trying to get/set the 'checked' attribute from a checkbox...

You will need to use prop() as of jQuery 1.6+

the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

...the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does

So to get the checked status of a checkbox, you should use:

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

Or to set the checkbox as checked or unchecked you should use:

$('#checkbox1').prop('checked', true); // To check it
$('#checkbox1').prop('checked', false); // To uncheck it
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Aha! Ok, this is what I was referring to. Thanks for the explanation, that's why I chose your answer over Derek's. Thanks Adam. PS. I'll accept your answer in 7 minutes, it's not letting me accept it right now.
Correction: you can change type attribute in IE if element is newly created and yet not added to DOM.
To set multiple attributes you need to wrap everything in { ... }... Don't the keys need to be in quotes?
30

the proper way is:

.attr({target:'nw', title:'Opens in a new window'})
Improve this answer

Comments

13

If you what to add bootstrap attributes in anchor tag dynamically than this will helps you lot

 $(".dropdown a").attr({
      class: "dropdown-toggle",
     'data-toggle': "dropdown",
      role: "button",
     'aria-haspopup': "true",
     'aria-expanded': "true"
});
Improve this answer

Comments

4

Something like this:

$(myObj).attr({"data-test-1": num1, "data-test-2": num2});
Improve this answer

Comments

2

Use curly brackets and put all the attributes you want to add inside

Example:

$('#objId').attr({
    target: 'nw',
    title: 'Opens in a new window'
});
Improve this answer

Comments

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"},
];
Improve this answer

1 Comment

Thanks for your reply. Can you please explain your code or add a demo of it working or something?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.