I ironhead Medlem sedan mars 2001 1 346 inlägg Frågan 8 dec. 2011 14:39 #1 Hej alla glada!
Försöker mha JQuery do some magic ;-)
har en tabell som ser ut som följer:
<table class="weeks">
<tr>
<td class="center"><a class="dialogForm tooltip" href="sida.aspx?50">50</a></td>
<td class="center"><a class="dialogForm tooltip" href="sida.aspx?51">51</a></td>
<td class="center"><a class="dialogForm tooltip" href="sida.aspx?52">52</a></td>
</tr>
<tr>
<td class="theme"><span>femti</span></td>
<td class="theme"><span>femtiett</span></td>
<td class="theme"><span>femtitvå</span></td>
</tr>
</table>
Jag vill nu modifiera texten i klasserna "theme" genom att lägga på länken från klasserna "center"
resultat ex.
<table class="weeks">
<tr>
<td class="center"><a class="dialogForm tooltip" href="sida.aspx?50">50</a></td>
<td class="center"><a class="dialogForm tooltip" href="sida.aspx?51">51</a></td>
<td class="center"><a class="dialogForm tooltip" href="sida.aspx?52">52</a></td>
</tr>
<tr>
<td class="theme"><span><a href="sida.aspx?50">femti</a></span></td>
<td class="theme"><span><a href="sida.aspx?51">femtiett</a></span></td>
<td class="theme"><span><a href="sida.aspx?52">femtitvå</a></span></td>
</tr>
</table>
Funkar att hämta ut länken med:
$('.weeks tr td').each(function () {
var lnk = $(this).find('.dialogForm').attr('href');
if (lnk.length > 0) {
alert(lnk);
}
...men hur ska jag hämta ut texten samt modifiera texten i den efterföljande mängden td?
Detta skriver ut alla val på samma gång:
var txt = $(trSel).closest("tr").next().find("td:has(span)").text();
//Texten i span ska bli en länk baserad på "lnk".
//ex. var newlnk = '<a href="'+lnk+'">'+txt+'</a>';
//$(trSel).closest("tr").next().find("td:has(span)").html(newlnk);
Hur göra...?
och du kan inte modifiera html koden alls? td.center känns som det borde vara en th ifrån början ;)
annars få du hämta ut kollektionen med $("td.center a")
och en kollektion med $("td.theme span") och loopar ut span och hämta dess index mot det index som du har i td.center a kollektionen.
man kan göra så:
var links = $("td.center a"),
theme = $("td.theme span").each(function(index) {
var span = $(this),
val = $(this).text(),
el = links.eq(index).clone().text(val).wrap("<span>");
span.replaceWith(el);
});
demo: http://jsbin.com/ogivan/edit#javascript,html,live
eller om a-elementet kan wrappar span:
var links = $("td.center a"),
theme = $("td.theme span").each(function(index) {
var span = $(this),
val = $(this).text(),
el = links.eq(index).clone().text(val);
span.text("").wrap(el);
});
eller:
var links = $("td.center a"),
theme = $("td.theme span").each(function(index) {
var span = $(this),
el = links.eq(index).clone().text("");
span.contents().filter(function(){return this.nodeType === 3}).wrap(el);
});
;)
I ironhead Medlem sedan mars 2001 1 346 inlägg Hej!
Alla exempel fungerade mycket bra. Tack så mycket.
Jag märkte dock att det smugit sig in en länk som jag vill hoppa över.
<div id="PrevWeek" style="position:static;float:left">
<a id="hypPrev" href="page.aspx"><img alt="Previous" border="0" src="images/left-scroll.gif" /></a>
</div>
Går det att på något bra sätt hoppa över den första länken som uppenbarar sig?
ta och ändra kollektionen att inte ta den första td på båda kollektionerna
:not(:first)
I ironhead Medlem sedan mars 2001 1 346 inlägg Försökte med detta, men utan gott resultat...
var links = $("td.center a:not(:first)"),
Det funkade nästan...sista länken kommer inte med..?!
Edit:
Sorry! Var jag som inte hade ett span-element runt sista länken.
Tusen tack för bra svar!!!
