2010-10-20 9 views
0

J'ai une balise p qui a beaucoup de balises d'ancrage et du texte. Je veux remplacer chacun des tags d'ancrage par son href respecté.remplacer le lien avec son href en utilisant jquery

+0

pourrait vous étoffer votre question un peu? Un exemple d'entrée et de sortie attendue aiderait beaucoup. –

+0

@Mat - Ce qui suit est ce que la question décrit: Entrée '

yada yada

' ------ Sortie '

blah

'. –

Répondre

7

J'interprète votre question que vous voulez remplacer la balise entière , non seulement le texte contenu, comme suit: http://jsfiddle.net/xXmWj/1/

Vous êtes la recherche .replaceWith():

$('p a').replaceWith(function() { 
    return $(this).attr('href'); 
}); 
+0

@Fixix, je tapais cette réponse! Vous êtes un démon de la vitesse. –

+0

Nettement plus propre que ma réponse. +1 –

+0

+1 pour plus de simplicité – xPheRe

1

Essayez ceci:

$('p').find('a').each(function() 
{ 
    var $this = $(this); 
    $this.html($this.attr('href')); 
}); 

Demo

+0

Plutôt que d'utiliser find, pourquoi ne pas laisser Sizzle faire ce qu'il fait de mieux et utiliser '$ ('p a')' – Phil

+1

@Phil: parce qu'ils sont sémantiquement équivalents, mais '.find()' est plus rapide. –

+1

@Phil: '$ (" p a ")' est très bien traduit en '$ (" p "). Find (" a ")'. Voir http://stackoverflow.com/questions/3177763/what-is-the-fastest-method-for-selecting-descendant-elements-in-jquery – Marko

1

solution CSS3 sans utiliser jQuery:

<style type="text/css"> 
    a > span { display: none; } 
    a:after { content: attr(href); } 
</style> 
<a href="http://www.test.com"><span>Test</span></a> 

gracieusement pour les navigateurs avilit non CSS3.

+0

N'apparaît pas comme si le pseudo-sélecteur ': after' était supporté avant IE9. http://www.quirksmode.org/css/contents.html#t15 – user113716

0

assez similaire, je sais ...

$("a").each(function(){ 
    $(this).text($(this).attr('href')); 
}); 
Questions connexes