Avatar billede dondy-kurt Nybegynder
05. august 2011 - 09:55 Der er 5 kommentarer og
1 løsning

jquery insertBefore $(this)

Hej Eksperter

Jeg har en liste der ser cirka således ud (skåret ind til benet):
<table>
  <tr>
    <div class="firstclass"></div>
    <div class="secoundclass"></div>
    <div class="thirdclass"></div>
    <div class="fourthclass"></div>
  </tr>
  <tr>
    <div class="firstclass"></div>
    <div class="secoundclass"></div>
    <div class="thirdclass"></div>
    <div class="fourthclass"></div>
  </tr>
  <tr>
    <div class="firstclass"></div>
    <div class="secoundclass"></div>
    <div class="thirdclass"></div>
    <div class="fourthclass"></div>
  </tr>
</table>

Jeg har så forgæves prøvet at rykke classen ved navn "fourthclass" så den ligger før "firstclass".
Jeg har prøvet ved hjælp af dette kode:
$('.fourthclass').insertBefore( $(this).parent().find('firstclass') );

Men det virker ikke rigtigt. Hvis jeg bare siger:
$('.fourthclass').insertBefore('firstclass');
Så rykker de alle sammen op i toppen.

Nogle der kan hjælpe mig?
Avatar billede jakobdo Ekspert
05. august 2011 - 11:27 #1
Hvad er det præcist du ønsker at opnå?
Avatar billede dondy-kurt Nybegynder
05. august 2011 - 11:48 #2
At trykke <div class="fourthclass"></div> ovenover <div class="firstclass"></div> i hver <tr>
Avatar billede jakobdo Ekspert
05. august 2011 - 11:52 #3
Måske du kan finde noget løsning her:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>944423</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#move").click(function(event){
    event.preventDefault();
    $(".section").each(function(index){
      var fourth = $(".fourthclass",this);
      var first = $(".firstclass",this);
      fourth.insertBefore(first);
    });
  });
});
</script>
</head>
<body>
  <div class="section">
    <div class="firstclass">1.1</div>
    <div class="secoundclass">1.2</div>
    <div class="thirdclass">1.3</div>
    <div class="fourthclass">1.4</div>
  </div>
  <div class="section">
    <div class="firstclass">2.1</div>
    <div class="secoundclass">2.2</div>
    <div class="thirdclass">2.3</div>
    <div class="fourthclass">2.4</div>
  </div>
  <div class="section">
    <div class="firstclass">3.1</div>
    <div class="secoundclass">3.2</div>
    <div class="thirdclass">3.3</div>
    <div class="fourthclass">3.4</div>
  </div>
  <div><a href="#" id="move">Move</a></div>
</body>
</html>
Avatar billede dondy-kurt Nybegynder
05. august 2011 - 12:42 #4
Sådan :)

Med lidt til retning så fik jeg det til at virke.. Tak skal du have :)
Avatar billede jakobdo Ekspert
05. august 2011 - 12:45 #5
Svar!
Avatar billede jakobdo Ekspert
05. august 2011 - 13:34 #6
Takker for point.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester