2016-05-21 8 views
-1

Also versuche ich, eine Klasse an meinem div anzuhängen, die Kinder eines Abschnitts sind, und ich habe in einige Schwierigkeiten gerannt.Simple Sibling() jquery-Problem. Klasse nicht an div anhängen

Hier ist der Grundcode.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Assignment 7 Starter File</title> 

<style> 
    body { 
     font-family:arial; font-size: 100%; 
     } 

    #outer { 
      width: 800px; 
      margin-left: auto; 
      margin-right: auto; 
      border: 1px solid #000; 
      padding: 10px; 
     } 

    h2 { 
     font-size: 16pt; 
     margin-bottom: 0px; 
    } 

    h1 { 
     font-size: 1.5em; 
     text-align: center; 
    } 

    div { 
     margin-bottom: 25px; 
     } 

    p { 
     margin: 0px; 
     padding: 10px; 
    } 

.bottomBorder { 
       border-bottom: 1px dashed #000; 
       } 
    </style> 
    <script src="http://code.jquery.com/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
     $("a").attr("target" , "_blank"); // makes tabs open in new tab 

     $("section #faq").siblings("div").addClass("bottomBorder"); //adds the class to the bottom of each div. Adds dots. 

     $("<aside><h2> Links used:</h2></aside>").insertAfter("section #faq"); 

     $("a").clone().appendTo("aside").append("<br />"); 



    }); 

</script> 
</head> 

    <body> 
    <header> 
     <h1>FAQ</h1> 
    </header> 

    <section id="outer"> 

    <section id="faq"> 

    <div> 
    <h2> What is jQuery?</h2> 
    <p>jQuery is a JavaScript library intended to make writing JavaScript easier and fun. For more information visit <a href="http://www.jquery.com">jQuery.com</a>. 
    </p> 
    </div> 

    <div> 
    <h2>How did jQuery Begin?</h2> 
    <p> 
    jQuery was developed in 2006 by John Resig, who is still the lead developer. For more information visit <a href="http://ejohn.org">ejohn.org</a> 
    </p> 
    </div> 

    <div> 
    <h2>What is the jQuery UI?</h2> 
    <p> 
    jQuery UI provides abstractions for low-level interaction and animation. 
     Visit <a href="http://www.jqueryui.com">jQueryui.com</a> 
    </p> 
    </div> 

    <div> 
    <h2>What is Minification?</h2> 
    <p class="content"> 
    Minification is the process of removing all unnecessary characters from source code. 
    </p> 
    </div> 

    </section> 

    </section> <!-- end outer --> 

    </body> 
</html> 

Also im Grunde möchte ich nur diese Klasse in die Div einfügen. Aber es wird nicht funktionieren. Es wird gut funktionieren, wenn der Code nur ein einfacher Append ohne die Geschwister ist, aber es scheint nicht, den Geschwister-Teil zu bekommen. irgendwelche Ideen?

+0

Was heißt '# faq' soll wählen? – j08691

+1

Wenn ich mich nicht irre, ist nicht die Funktion '.siblings()'? Oder ist das ein Tippfehler –

+0

Aktualisierte den Code, um die ganze Seite für weitere Referenz aufzunehmen. War ursprünglich zu verwirrend. Ja, das war ein Tippfehler, dachte, es würde es beheben, aber nicht der Fall. Der Code ist immer noch falsch, wie es scheint. –

Antwort

0

Sie haben es ziemlich richtig, aber Ihr jQuery-Selektor ist ein wenig aus. Sie versuchen, die Klasse auf die erste div richtig zu setzen? Wenn ja, sollte diese Arbeit:

$("section#faq div").eq(0).addClass("bottomBorder"); 

Hinweis gibt es keinen Raum zwischen section und #faq und dann die eq(n) können Sie festlegen, welche der divs holen Sie wollen, 0 der erste zu sein.

[EDIT aktualisiert Antwort Kommentare:]

Um eine Klasse zu allen divs mit der Auswahl übereinstimmen hinzufügen, fügen Sie einfach die Klasse zu diesem Ergebnis Array jQuery direkt:

$("section#faq div").addClass("bottomBorder"); 

Hinweis dass alle Arbeiten vom Selektor ausgeführt werden, der alle divs innerhalb eines Abschnitts mit der ID "faq" abgleicht.

+0

Danke, ich habe versucht, es unter alle Divs für eine Aufgabe zu setzen. Normalerweise würden Sie wahrscheinlich nur Geschwister() verwenden, um nur ein oder zwei von ihnen auszuwählen, aber für den Fall, dass ich es unter alle setzen sollte. append allein war nicht gut genug. –

+0

oh, okay. Wenn Sie es auf allen divs wollen, nur loswerden der 'eq (0)'. Also, '$ (" Abschnitt # faq div "). AddClass (" bottomBorder ");' sollte funktionieren. – jonaz

0

Versuchen Kinder Funktion:

$("section #faq").children("div").addClass("bottomBorder"); 

Beispiel fiddlejs