jQuery使给定div的所有子链接在新窗口中打开

Question

I have a div with ID "MyDiv" in which I need all child anchors of this div to open in a new window.

I'm trying:

jQuery('#MyDiv.children() a').click(function(){
    jQuery(this).attr('target', '_blank');
});

Answer 1

_{click here for jsFiddle example}

$('#MyDiv a').attr ('target', '_blank');

If you are unsure about how this attributes works read up on it below:

• HTML a target Attribute

---

If you don't fancy the use of target="_blank" (it's often frowned upon when writing xHTML) you could bind a click event to the anchors and open a new window using javascript/jquery.

Such as in the below example:

_{click here for jsFiddle example}

$('#MyDiv a').click(function(ev) {
  window.open(this.href);
  ev.preventDefault   (); // see post comment by @nbrooks
});

Answer 2

The problem is the main selector. .children() is not a valid part of a css selector. If you add a space in the css selector, the following part of the selector will be searched in all child nodes. If you want to search in the direct child nodes only, you can use > instead. Eg replace #MyDiv.children() a with #MyDiv>a :

jQuery('#MyDiv>a').click(function(){
    jQuery(this).attr('target', '_blank');
});

or you can use:

jQuery('#MyDiv>a').click(function(oEvent) {
    oEvent.preventDefault();
    window.open($(this).attr('href'), '_blank');
});

Answer 3

you can get rid off the .children() in the selector.

Markup:

<div id="MyDiv">
    <a href="http://wwww.google.com">1</a>
    <a href="http://wwww.google.com">2</a>
    <a href="http://wwww.google.com">3</a>
    <a href="http://wwww.google.com">4</a>
</div>​

jQuery:

$('#MyDiv a').click(function(){ 
    $(this).attr('target', '_blank'); 
}); ​

jsFiddle example

Answer 4

This may be useful for you

$('#MyDiv a').live('click', function() {
    window.open($(this).attr('href'));
    return false;
});