Kirjautuminen

Haku

Tehtävät

Kilpailu

Putka Open 2025
Kilpailu on päättynyt.

Keskustelu: Nettisivujen teko: tekstin muuttaminen jquerylllä class:in mukaan

thek [22.01.2010 09:53:31]

#

Mulla on divi:

<div id="a" class="default"><span>teksti1</span></div>

Miten saisin jqueryllä muutettua teksti1:sen teksti2:ksi divin classin mukaan.

esim.
Jos class="default" näytä teksti1 muuten näytä teksti2.

kayttaja-2791 [22.01.2010 12:31:25]

# 

$(":not(.default)").text("Teksti1");

Ellen nyt ihan jäässä ole (en siis ole testannut). Ota tosin huomioon että tuo tosiaan muuttaa kaikkien elementtien tekstin (?) jos kyseessä ei ole default-classin omaava elementti... Eli varmaankin haluat tehdä jonkinlaisen rajauksen, että esim. vaikka div#containerin sisällä olevissa diveissä vain toteutetaan tuo.

$("div#container > div:not(.default)").text("Teksti1");

thek [22.01.2010 13:18:51]

#

Mites tuon tekstin saa menemään <span> -tagien sisään? Nyt jää niiden ulkopuolelle.

Laitoin mukaan koodirimpsun jos joku muukin haluaa tsekata.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div#container > div:not(.default)").text("Teksti2");
});
</script>
<style type="text/css">
<!--
#container #a span {
	color: red;
}
-->
</style>
</head>

<body>
<div id="container">
<div id="a" class="not_default"><span id="testi">default</span></div>
</div>

Metabolix [22.01.2010 13:40:14]

#

No laita siihen CSS-valitsimeen span mukaan. Nythän se valitsee suoraan div:not(.default)-elementit.

thek [22.01.2010 14:26:29]

#

Metabolix kirjoitti:

No laita siihen CSS-valitsimeen span mukaan.

Mitenkäs tämä tapahtuisi?

kayttaja-2791 [22.01.2010 15:50:52]

#

CSS-valitsimet siis toimivat kuten CSS:ssä yleensäkin. Eli kuten vaikka olet jo määritellyt aiemmassa CSS:ssä käyttäen välilyöntiä:

$("div#container > div:not(.default) span").text("Teksti2");

Voit toki myös korvata > merkinnän ihan vain välilyönnillä, tuolla > -merkillä taidetaan hyväksyä vain suorat lapset, välilyönnillä taas hyväksytään lapsenlapset jne. myös mukaan. Eli yleisempi merkintä vähän löysemmillä hyväksymisperusteilla:

$("div#container div:not(.default) span").text("Teksti2");

http://api.jquery.com/descendant-selector/
http://api.jquery.com/category/selectors/

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta