JQuery und CSS - CSS wirkt nicht mit JQuery-append

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo zusammen,

den Code habe ich unten angehängt.

Wenn ich den laufen lasse, dann wirken die CCS teile nur auf den HTML-Code, der bereits direkt erfasst ist, und nicht auf den Teil, der mit JQuery angehängt wird.

Kann mir bitte jemand sagen, woran das liegt bzw. wie ich das  ändern kann?

Vielen Dank für eure Hilfe!

powerblue

Code:

 
  Titel
  
  <!–
  nav {
   width: 960px;
  }
  nav ul {
   padding: 0px;
   margin: 0px;
  }
  nav ul:after {
   clear: both;
   content: " „;
   display: block;
   font-size: 0;
   height: 0;
   visibility: hidden;
  }
  nav ul, nav ul li {
   background-color: #FAFAFA;
  }
  nav ul li {
   list-style: none;
   float: left;
  }
  nav ul li a {
   text-decoration: none;
   display; block;
   color: #333;
   padding: 14px 34px 14px 34px;
  }
  nav ul li:hover > ul {
   visibility: visible;
  }
  nav ul li ul {
   display: inline;
   visibility: hidden;
   position: absolute;
   padding: 0px;
  }
  nav ul li ul li {
   float: none;
  }
  nav ul li ul li a:hover {
   color: #333;
  }
  nav ul {
   padding: 0px;
   margin: 0px;
   
   box-shadow: 2px 2px 2px #dfdfdf;
   -moz-box-shadow: 2px 2px 2px #dfdfdf;
   -webkit-box-shadow: 2px 2px 2px #dfdfdf;
  }
  nav ul li {
   list-style: none;
   float:left;
   border-richt: 1px solit #dfdfdf;
  }
  nav ul li a {
   text-decoration: none;
   display: block;
   color: #333;
   padding: 14px 34px 14px 34px;
   
   transition: background 0.3s ease-out;
  }
  -->
  
  
    
   $(document).ready(function () {
    for (var zeile = 0;zeile<1;zeile++) {
     $(’#feld’).append(“<nav>");
     $(’#feld’).append("<ul>");
     $(’#feld’).append("<li class=‚zelle1‘>");
     $(’#feld’).append("<a href=‚javascript:return false‘>1</a>");
     $(’#feld’).append("<ul>");
     $(’#feld’).append("<li><a href=‚javascript:return false‘>x</a></li>");
     $(’#feld’).append("<li><a href=‚javascript:return false‘>y</a></li>");
     $(’#feld’).append("<li><a href=‚javascript:return false‘>z</a></li>");
     $(’#feld’).append("</ul>");
     $(’#feld’).append("</li>");
     $(’#feld’).append("</ul>");
     $(’#feld’).append("</nav>");
    };
   });
  
 
 
  
     
     

     -
     [1](javascript:return%20false)
     

      - [x](javascript:return%20false)

      - [y](javascript:return%20false)

      - [z](javascript:return%20false)

     
     

     
     
  
 

#2

Hallo zusammen,

den Code habe ich unten angehängt.

Wenn ich den laufen lasse, dann wirken die CCS teile nur auf
den HTML-Code, der bereits direkt erfasst ist, und nicht auf
den Teil, der mit JQuery angehängt wird.

Kann mir bitte jemand sagen, woran das liegt bzw. wie ich das
ändern kann?

du benutzt append falsch und erhälst deshalb andere dom-knoten, als du erwartest.
jquery erzeugt bei jedem append einen gültigen knoten und repariert dazu dein html.

du schreibst:

> $('#feld').append(" ");  
> $('#feld').append("
> ");

und er macht:

> $('#feld').append(" ");  
> $('#feld').append("

");

du musst also deinen html code zusammensetzen und dann mit 1 append einfuegen
im übrigen solltst du so viele gleiche selectoren vermeiden. indem du dir den knoten in einer variable merkst, od. die aufrufe chainest. also:

var $feld = $('#feld');
$feld.append("");
$feld.append("");

oder

$('#feld').append("").append("");

den fehler sieht man z.b. im firebug sehr schoen:

[1](javascript:return%20false)

  • [x](javascript:return%20false)

  • [y](javascript:return%20false)

  • [z](javascript:return%20false)

  • [1](javascript:return%20false)

  • [x](javascript:return%20false)

  • [y](javascript:return%20false)

  • [z](javascript:return%20false)

#3

Hallo Jörg,

danke für die Lösung für mein Problem.

Da ich - wie man bestimmt erkennt - JQuery-Anfänger bin, kann die die zusätzlichen Tipps auch gut gebrauchen, dann kann ich es mir sofort vernünftig angewöhnen.

Grüße

powerblue