如何使用“（this）”使用jQuery將html附加到div

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/

//對原始帖子進行了修改，以更好地理解，再次感謝您提供的所有幫助。 如您所見..有循環。 如果我這樣保留JS代碼，則圖像的所有標題會一起出現在每個圖像上，而不是相關的標題。 我無法將標題與該（該）單個圖像相關聯。

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

您可以使用append()或prepend()來確定兩者的作用:)

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

Answer 2

我同意馬克·克諾爾的回答。 但更詳細地說，它看起來像這樣。

<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>');
});

“ this”定義選擇器的上下文。 並且就像說在單擊事件發生的上下文中搜索此選擇器（.my-header）。

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