Obtenez le contenu dans une balise td quand planait sur

Question

<td> 
    Some stuff here 
    <span style="display: none;">sekret stuff here</span> 
</td> 

Comment puis-je obtenir le contenu de la balise <span> dans cette td, de sorte que ma sortie serait « substance sekret ici », en utilisant jQuery?

J'ai essayé plusieurs choses, mais je n'ai rien pu faire. = /.

Answer 1

Cette alertera le contenu du span en vol stationnaire au-dessus de la td, que si le td a un élément span intérieur:

$('td').mouseover(function() { 
    if($(this).find('span').size() > 0) { 
     // This will alert 'sekret stuff here' 
     alert($(this).find('span').html()); 
    } 
}); 

Answer 2

En supposant qu'il ya juste un de ces derniers sur une page:

$('td span').html(); 

Answer 3

Si vous voulez faire quelque chose avec le contenu après son été planait sur la cellule td vous devez donner la cellule td un ID.

<td id="mycell"> 
    Some stuff here 
    <span style="display:none">Sekret stuff</span> 
</td> 

Et puis utiliser jQuery pour lier un événement mouseover et faire quelque chose avec le contenu:

var cell = $('#mycell'), span = cell.find('span'); 

cell.bind('mouseover', function() { 
    var contents = span.html(); 
    // do something with contents 
}); 

Answer 4

Essayez ceci:

$('td').hover(function() { 
    var c = $(this).children('span'); 
    if (c.length > 0) { 
     alert($(c[0]).text()); 
    } 
}); 

Il se liera un événement à chaque td sur votre page, et chercher des éléments enfant span, surgissant une alerte avec le contenu de la première span à l'intérieur de la td. Vous pouvez remplacer la partie alert() du code par ce que vous voulez faire avec le contenu span. Notez qu'à l'intérieur de ce code, this fera référence à l'élément td.

Answer 5

Vous pouvez envisager d'utiliser CSS pur, car il est potentiellement plus rapide.

HTML:

<td> 
    <a class="magic_link" href="#">Some stuff here 
    <span>sekret stuff here</span></a> 
</td> 

CSS:

a.magic_link:link, 
a.magic_link:visited { 
    display: block; 
    width: 100px; 
    height: 50px; 
} 

a.magic_link:link span, 
a.magic_link:visited span { 
    display: none; 
} 

a.magic_link:hover span { 
    display: inline; 
} 

Answer 6

Si vous avez d'autres td « s sur la page qui ne le font pas contiennent un span, vous aurez probablement envie utilisez le sélecteur :has pour vous assurer que vous liez uniquement à td qui a un span enfant.

$('td:has(span)').mouseover(function(e) { 
    var content = $(this).find('span').html(); //or .text() for the plain text 
    //do something with the content 
}); 

Je pense que vous êtes probablement mieux de donner soit le td ou span une classe sémantique cependant, il va faire l'objet de votre HTML un peu plus évident. Quelque chose comme

<td> 
    Some stuff here 
    <span class="sekret" style="display: none;">sekret stuff here</span> 
</td> 

... et modifier le sélecteur dans le javascript est quelque chose comme

$('td:has(.sekret)').mouseover(...