Question

所以我试图在我的div中附加一个类，这是一个部分的孩子，我遇到了一些麻烦。

这是基本代码。

<!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>

所以基本上我只想将该类插入div中。但它不会起作用。如果代码只是一个简单的附加而没有兄弟，它会工作得很好但它似乎无法让兄弟部分失效。任何想法？

Answer 1

你已经非常正确，但你的jQuery选择器有点偏。你试着把课程放在第一个div上吗？如果是这样，这应该有效：

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

请注意section和#faq之间没有空格，然后eq(n)可让您选择所需的div，0是第一个。

[编辑更新回复评论：]

要向选择器匹配的所有div添加一个类，只需将该类直接添加到该jQuery结果数组中：

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

请注意，所有工作都由选择器完成，它将匹配id为“faq”的部分内的所有div。

Answer 2

尝试使用儿童功能：

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

示例fiddlejs

Simple Sibling（）jquery问题。没有将类附加到div

2 个答案: