Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 4

Posted by Caspar Palmgren Kjäll
Caspar Palmgren Kjäll
3,938 Points

Problem with the Caption inside <div>

Hey,

I am trying to get the caption inside a div class element. I cant get the thing to work properly to find the correct value to be displayed. I have tried to search for the answer but my only answer I have could find is that the .children is probably wrong with the <div> element inside.

Here is the code:

    <div id="imageGallery">
        <a href="image/picture.jpg"><div class="third-content-event">
            <h4>User</h4>
            <img src="image/picture.jpg">
            <p class="selected">
                Text for the user
            </p>
        </div></a>

        <a href="image/avatar.jpg"><div class="third-content-event">
            <h4>Admin</h4>
            <img src="avatar.jpg">
            <p class="selected">
                Text for the admin
            </p>
        </div></a>

        <a href="image/face.jpg"><div class="third-content-event">
            <h4>Forumuser</h4>
            <img src="face.jpg">
            <p class="selected">Text for the forumuser</p>
        </div></a>
    </div>

I would really appreciate if someone could help me find an answer to this caption problem I am struggling with

/Caspar

LaVaughn Haynes
LaVaughn Haynes
12,397 Points
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

I have not taken that lesson. By "caption" do you mean the text in the paragraph tags with the "selected" class?

2 Answers

Caspar Palmgren Kjäll
Caspar Palmgren Kjäll
3,938 Points
Caspar Palmgren Kjäll
Caspar Palmgren Kjäll
3,938 Points

Hi LaVaughn, exactly.

In the class they are using the code:

var captionText = $(this).children("img").attr("alt");
$caption.text(captionText);

To get a caption of the "alt" attribute under the image. With my example I stated above I am trying to get a caption of the <p> paragraph inside the <div>.

But I got no idea how I can fix this.

/Caspar

LaVaughn Haynes
LaVaughn Haynes
12,397 Points
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

Remember, I can't see your exact question so this is more of a guide. First of all I noticed that you did not have an alt tag on your image but you are trying to extract a value from the alt tag. Add an alt tag to your image.

Next make sure that if you are searching for that alt text with .children() that you are searching from the images direct parent. See below for an example. This is not your exact problem but hopefully will help you figure out what needs to be changed on your end.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Caption</title>
</head>
<body>

  <div class="caption">Caption will be placed here</div>
  <br><br>
  <div id="imageGallery">

    <div class="third-content-event">
      <h4>User</h4>
      <!-- you didn't have an alt attribute on the image -->
      <img src="http://i.stack.imgur.com/Mmww2.png" alt="This was just added">
      <p class="selected">
        Text for the user
      </p>
    </div>

  </div>

  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script>

    $('.third-content-event').each(function(){

      //select the div to output caption to for this demo
      var $caption = $('.caption');

      //You were missing an alt attribute on your image above.
      //With children() a 'child' has to be a direct child of the element being searched
      //in this case it's $(this) which refers to $('.third-content-event').
      //If you want to search for a child that is NOT a direct child then use find().
      var captionText = $(this).children("img").attr("alt");

      //put the text in the caption
      $caption.text(captionText);

    });
  </script>

</body>
</html>