mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 11:41 Benutzername: Passwort: Auto-Login

Thema: [jQuery] - Kindelemente ansprechen vom 25.03.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> [jQuery] - Kindelemente ansprechen
Autor Nachricht
Kash
Threadersteller

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mi 25.03.2009 16:48
Titel

[jQuery] - Kindelemente ansprechen

Antworten mit Zitat Zum Seitenanfang

hallo ich habe folgendes markup

HTML
Code:

<div class="wrapBlock">
  <h1>Headline</h1>
    <div>
   <p>
     das ist einleitender text
     <br /><br />
     <em>
       Lorem ipsum Lorem ipsum<br />
       Lorem ipsum Lorem ipsum<br />
     </em>
   </p>
    </div>
</div>


das em element habe ich via CSS ausgeblendet

folgend mal das jQuery zeugs.

Code:

$(document).ready(function() {
  $("p").mouseover(function(){
     $(this).css("cursor","pointer");
  });
           
  $("p").click(function(){
       if ($(this).next("em").is(":hidden")) {
          $(this).next("em").slideDown("slow").css("display","inline-block");
   } else {
     $(this).next("em").slideUp("slow").css("display","none");
   }
  });
});


das markup von oben wiederholt sich mehrere male.
und der em-part soll dementsprechend nur bei dem aktuell geklickten element sichtbar werden.
nur funzt das irgendwie nicht.

bei einem anderen projekt klappt es wunderbar.was läuft hier schief?
  View user's profile Private Nachricht senden
Kash
Threadersteller

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Do 26.03.2009 10:43
Titel

Antworten mit Zitat Zum Seitenanfang

also das problem hier ist wohl das inline-element 'em' welches sich nicht steuern läßt.
bild ich daraus ein div und spreche in der function dieses als nächstes element an dann läuft es.
leider kann ich das em, ginge auch span, nicht als Blockelement definieren, da dieses im normalzustand nicht zu sehen sein soll.

CSS
Code:

div.wrapBlock {
  margin-top:10px;
  width:500px;
  background:#F0F0F0;
  border:1px solid #535353;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  padding-top:5px;
  padding-left:5px;
}
      
div.wrapBlock h1:first-child {
  background:#ccc;
  display:block;
  width:495px;
  padding:5px;
  margin-top:-5px;
  margin-left:-5px;
  font-size:12px;
  font-weight:bold;
}
      
div.wrapBlock p {
  padding:0;
  margin:0;
}
            
div.wrapBlock .inner > div {
  display:none;
  margin:0;
  padding:0;
}


HTML (schlechtes markup da Block in Inline)
Code:

<div class="wrapBlock">
      <h1>Überschrift</h1>
      <div class="inner">
         <p>
            Lorem ipsum
            <br /><br />
            <div>
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
            </div>
         </p>
      </div>
   </div>
<div class="wrapBlock">
      <h1>Überschrift</h1>
      <div class="inner">
         <p>
            Lorem ipsum
            <br /><br />
            <div>
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
            </div>
         </p>
      </div>
   </div>



jQery
Code:

$(document).ready(function() {
  $("p").mouseover(function(){
    $(this).css("cursor","pointer");
  });
         
  $("p").click(function() {
    if ($(this).next("div").is(":hidden")) {
      $(this).next("div").show("slow").css("display","block");
    } else {
      $(this).next("div").hide("slow");
    }
  });
});


das ganze läuft automatisch in Typo3 ab.
ich habe leider nicht die Möglichkeit das MarkUp beliebig anpassen zu können.da es für die redakteure später flexibel sein soll.d.h. ich habe nur ein inline-element zur verfügung.die möglichkeiten des wrappens mittels TypoScript habe ich ausgereizt.
hat mir jemand eine idee wie ich auch inlineelmente (ohne dieses in ein blockelement zu setzen) mittels dem framework anzeigen zu lassen?

//ich habe jetzt ein kleines zwischenergebniss welches fast funktioniert

Code:

$(document).ready(function() {
  $("p").mouseover(function(){
    $(this).css("cursor","pointer");
  });
         
  var n = 0;
  $("div.wrapBlock").one("click", function(){
    var index = $("div.wrapBlock").index(this);
    if($(this).find("em").is(":hidden")) {
      $(this).find("em").slideDown("slow").css("display","block");
    } else {
      $(this).find("em").slideUp("fast").css("display","none");
    }
  });
});


es ist jetzt so das er das em-element findet und auch nur das welches geklickt wird angezeigt wird.
problem bei der sache ist, das bei erneutem klick der em nicht mehr ausgeblendet wird.
Hä? Hä? Hä? Hä?

//ok habe den fehler gefunden

Code:
$("div.wrapBlock").one("click", function(){


durch meine anfangsgezeigte zeile
Code:
$("div.wrapBlock").click(function(){


tauschen.

grüße


Zuletzt bearbeitet von Kash am Do 26.03.2009 11:57, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 26.03.2009 13:36
Titel

Antworten mit Zitat Zum Seitenanfang

Wie siehts mit
Code:

display: inline-block;


aus? Geht das denn?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash
Threadersteller

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Do 26.03.2009 13:51
Titel

Antworten mit Zitat Zum Seitenanfang

hallo smooth, ich hatte den fehler behoben.
falls es von interesse ist nochmal der dummy in voller länge

Code:

<!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" xml:lang="de" lang="de">
<head>
   <title>jQuery Test</title>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <meta http-equiv="Content-Language" content="de" />
   <meta http-equiv="imagetoolbar" content="no" />
   <meta name="MSSmartTagsPreventParsing" content="true" />
   <meta name="description" content="" />
   <meta name="keywords" content="" />
   <meta name="author" content="xxx" />
   <style type="text/css">
      div.wrapBlock {
         margin-top:10px;
         width:500px;
         background:#F0F0F0;
         border:1px solid #535353;
         -moz-border-radius: 3px;
         -webkit-border-radius: 3px;
         padding-top:5px;
         padding-left:5px;
      }
      
      div.wrapBlock h1:first-child {
         background:#ccc;
         display:block;
         width:495px;
         padding:5px;
         margin-top:-5px;
         margin-left:-5px;
         font-size:12px;
         font-weight:bold;
      }
      
      div.wrapBlock p {
         padding:0;
         margin:0;
      }
            
      div.wrapBlock .inner em {
         display:none;
         margin:0;
         padding:0;
      }
   </style>
   <script type="text/javascript" src="library/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   <!--
      $(document).ready(function() {
         $("p").mouseover(function(){
            $(this).css("cursor","pointer");
         });
         var n = 0;
         $("div.wrapBlock").click(function(){
             var index = $("div.wrapBlock").index(this);
             if($(this).find("em").is(":hidden")) {
               $(this).find("em").slideDown("slow").css("display","block");
            } else {
               $(this).find("em").slideUp("slow");
            }
         });
      });
   //-->
   </script>
</head>
<body>
   <div class="wrapBlock">
      <h1>Überschrift</h1>
      <div class="inner">
         <p>
            Lorem ipsum
            <br /><br />
            <em>
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
            </em>
         </p>
      </div>
   </div>
   <div class="wrapBlock">
      <h1>Überschrift 2</h1>
      <div class="inner">
         <p>
            Lorem ipsum
            <br /><br />
            <em>
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
               Lorem ipsum Lorem ipsum<br />
            </em>
         </p>
      </div>
   </div>
</body>
</html>
  View user's profile Private Nachricht senden
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht: Männlich
Verfasst Do 26.03.2009 15:29
Titel

Antworten mit Zitat Zum Seitenanfang

ausm kopp bin ich mir gerade nicht zu 100% sicher, aber um nur das nächste folgende element in jquery anzusprechen, hättest du statt next

Code:

$(this + ' + em')


nehmen können. versuchs mal...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash
Threadersteller

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Do 26.03.2009 16:03
Titel

Antworten mit Zitat Zum Seitenanfang

das test ich mal.

jetzt nutze ich ja .find("foo")
  View user's profile Private Nachricht senden
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht: Männlich
Verfasst Do 26.03.2009 18:28
Titel

Antworten mit Zitat Zum Seitenanfang

Kash hat geschrieben:

jetzt nutze ich ja .find("foo")


hab ich gesehen. ich habe nur im kopp, dass ich die variante mit dem "+" bei ner menge toggle-funktionen nehme, um nur das nächste element seiner art anzusprechen. klappt 1a *zwinker*

also, vielleicht fürs nächste mal...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [CSS] - Kindelemente ansprechen
einzelenen link mit jquery ansprechen
jQuery - folgende Elemente ansprechen
jQuery Link in Liste ansprechen
Fehlende Kindelemente in Baumstruktur - Bug in PHP 4?
a:active funktioniert nicht auf kindelemente?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.