How to append html to a div with jquery using "(this)"

Question

I am developing a script to use in my PHP page in wordpress. My purpose is to create a title on any image shown in my photo gallery in lightbox, so I developed this:

    $(".responsive1").bind("click", function() {
        $(this).("<div class='imgTitle'><?php echo $title ?></div>").appendTo(".lb-nav");
    });

But unfortunately it does not work. I have this feedback from the browser

>SyntaxError: missing name after . operator

Basically, I wish that every time that I click the image in the thumbnail with class `responsive1`, in the lightbox image that pop up, and a title will be added at the top.

To do this, I need to refer to that image using `this` after the function starts  the imgtitle class is added and then appended to that lightbox image, once popped up.

Any ideas? I think my script is not in the correct syntax
thanks to everyone for help

My website page with the gallery, in case it can helps: http://www.paolobergomi.it/new-gallery/outdoor-portraits/

// Original post modified for better understanding thanks again for all that are trying to help. As you see..there is loop. If I leave the JS code like this, all the titles of the images appears on each images together, and not the related title. I am not able to relate the title to that(this) single image.

<?php
/*
Template Name: Gallery Page
*/
?>
<?php get_header(); ?>
     <?php

                // check if the repeater field has rows of data
                if( have_rows('category_gallery') ):

                  // loop through the rows of data
                    while ( have_rows('category_gallery') ) : the_row();

                        // display a sub field value
                      $image = get_sub_field('cat_image');

                      $title = get_sub_field('cat_title');
        ?>     

                      <a href="<?php echo $image['url']; ?>" data-lightbox="group1" width="220" height="180">
                        <img class="responsive1" src="<?php echo $image['url']; ?>" data-lightbox="<?php echo $image['url']; ?>">
                      </a>
                       <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>

                        <script>




                                  $(".responsive1").bind("click", function() {  
                                    $(".lb-nav").prepend("<div class='imgTitle'><?php echo $title ?></div>");


                                });



                     </script>




        <?php
                endwhile;

                    else :

                    // no rows found

                    endif;



        ?>


 <div class="spacing"></div>

<?php get_footer(); ?>

Answer 1

I agree with Mark Knol's answer. But in more detail it would look some thing like this.

<div class="foo">
    <h1 class="my-header"></h1>
    <span>foo</span>
</div>
<h2 class="my-header">baz</h2>

 $('.foo').on('click', function() {
     $('.my-header', this).append('<span>bar</span>');
});

The 'this' defines the context of the selector. And is like saying search for this selector (.my-header) in the context of where the click event happened.

jsfiddle: https://jsfiddle.net/yyjudgdp/

Answer 2

You can use append() or prepend() and go figure out what both do :)

$(".responsive1").bind("click", function() {
  $(".lb-nav", this).append("<div class='imgTitle'><?php echo $title ?></div>");
});