【问题标题】:Jquery selectors [closed]Jquery选择器[关闭]
【发布时间】:2014-08-08 16:59:49
【问题描述】:

我正在尝试学习 jQuery。我被问到以下问题,但我不确定答案:

  1. 将选中的元素添加到 h1 元素之后且处于同一级别的图形元素。

    我的猜测是:$("h1 figure").addClass("selected");

  2. 将选择添加到类 recensie 且属于类 album_reviews 的所有不均匀文章元素。

    我的想法:$("#album_reviews #recensie article:odd").addClass("selected");

  3. 将选择添加到 ul 元素中的最后一个 listitem 元素,类:“sitemap”

    我的想法:$("ul#sitemap li").last().addClass("selected");

我知道这听起来像是家庭作业,但它是用于个人培训,我真的被困住了。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>wp22 tentamen van 13 juni </title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/vraag1.js"></script>
</head>

<body>

<div class="container">
  <header>
    <h1>Music Lovers</h1>
    <nav>
        <ul class="nav">
        <li> <a href="#">New Music</a> </li>
        <li> <a href="#">Album Reviews</a> </li>
        <li> <a href="#">Concert Reviews</a> </li>
        <li> <a href="#">Community</a> </li>
        <li> <a href="#">Login</a> </li>
      </ul>
    </nav>
  </header>
  

  
  <section class="album_reviews">
    <h2 class="sectiontitel"> Album Reviews </h2>
    <article class="recensie">
      <h1> Neil Young – A Letter Home </h1>
      <img src="Images/Albums/A_Letter_Home.jpg" alt="album_image"/>
      <p>Earlier this year, Neil Young unveiled Pono, a super-high-def audio service meant to deliver us from the sonic crimes of the earbud era. For his next act, he's released an acoustic covers set recorded at Jack White's Nashville music shop on a Voice-O-Graph--a super-low-def 1940s contraption that looks like a phone booth and sounds a few steps removed from a rusty tin can and some twine. If it's meant as some kind of joke, here's the punch line: In its perverse way, A Letter Home is one of the most enjoyable records Young has made this century.</p>
      <p> 
        <a href="http://www.rollingstone.com/music/albumreviews/a-letter-home-20140502#ixzz33g0Hq3pw"> Read more </a>
      </p>       
    </article>
  </section>

  <section class="band_members">
    <h2 class="sectiontitel"> Band Members</h2>
    <article class="recensie">
      <h1> Neil Young </h1>
      <figure>
          <img src="Images/Artists/Neil_Young.jpg" alt="Macaque in the trees">
          <figcaption> Neil Young <br /> Singer Songwriter </figcaption>
      </figure>
    </article>
  </section>

<footer>
     <nav>
        <div>
           <h3>Sitemap</h3>
           <ul class="sitemap">
              <li> <a href="#">New Music</a></li>
            <li> <a href="#">Album Reviews</a></li>
            <li> <a href="#">Concert Reviews</a></li>
            <li> <a href="#">Community</a></li>
            <li> <a href="#">Login</a></li>
        </ul>
      </div>
      <div>
        <h3>Links</h3>
        <ul class="links">
            <li> <a href="#">rollingstone.com</a></li>
            <li> <a href="#">3voor12.vpro.nl</a></li>
            <li> <a href="#">pitchfork.com</a></li>
            <li> <a href="#">nme.com</a></li>
            <li> <a href="#">allmusic.com</a></li>
        </ul>
      </div>
    </nav>
    <p> &copy;FHICT </p>
</footer>

</div>
</body>
</html>

【问题讨论】:

  • 你的问题到底是什么?
  • 我不知道为什么我的答案是错误的。
  • jQuery 选择器的文档将为您提供帮助。 api.jquery.com/category/selectors。你会马上看到"h1 figure" 不是选择h1 之后的figure 的正确方法。 "h1 figure" 是后代选择器。你想要下一个兄弟姐妹。
  • 1. $("h1 + figure").addClass("selected"); - 下一个兄弟选择器
  • I know this sound like homework assignments, but it's for personal training and I'm really stuck. 听起来用户 Xereoth 正在做同样的个人培训...stackoverflow.com/questions/24284767/…

标签: jquery jquery-selectors


【解决方案1】:

我会尽力回答你的:

1.

$("H1").nextAll("figure").addClass("selected");

2.

$(".album_reviews").find("article.recensie:odd").addClass("selected");

3.

$("ul.sitemap").find("li:last-child").addClass("selected");

注意“类”选择器以“.”开头而不是“#”

http://api.jquery.com/category/selectors/

【讨论】:

  • 您好,感谢您的回复,我想知道为什么最后一个答案不是:$("ul.sitemap li").last().addClass("selected");?哦,对不起,我发现我最后一个问题放错了,你能看一下吗?
  • nvm,我明白了,谢谢!
  • 确定它是否是你可以做的最后一个元素 .find("li:last-child").addClass... ** 我很确定 .last() 会选择绝对的最后一个元素,而不是你想要的组中的每个最后一个元素
猜你喜欢
  • 2015-07-19
  • 2010-12-12
  • 2010-12-01
  • 1970-01-01
  • 1970-01-01
  • 2010-11-01
  • 2012-10-13
  • 2011-05-24
  • 2010-11-17
相关资源
最近更新 更多