Javascript 如何在单击相同的类名时显示正确的内容？

我希望你们中的任何人都能给我一些帮助。正如你们所看到的，我有一个列表，并将所有列表附加到一个表中。现在，我添加了侦听器来显示下面命名的div。由于所有div现在都有相同的类，show（）函数不起作用。有人知道如何让它显示我点击的那个吗

谢谢xxx 李

PS：我试着使用“最近的”，但它哪儿也去不了

    $('.bundle-main').append('<ul class="item-content clearfix">\
                        <li class="td td-chk">\
                          <div class="cart-checkbox ">\
                            <input class="check" id="J_CheckBox_170037950254" name="items[]" value="170037950254" type="checkbox">\
                            <label for="J_CheckBox_170037950254"></label>\
                          </div>\
                        </li>\
                       <li class="td td-info">\
                        <div class="item-props item-props-can">\
                            <span class="sku-line">'+data[0].productname+'</span>\
                             <span tabindex="0" class="btn-edit-sku theme-login" >edit</span>\
                               <i class="theme-login am-icon-sort-desc"></i>\
                         </div>\
                       </li>\    
                      <div class="theme-popover-mask">
                       <div class="theme-popover">\
                         <div class="theme-span">
                         </div>\
                        </div>\
                      </div>\
                    </ul>');
var $ww = $(window).width();
        $('.theme-login').click(function() {

                $(document.body).css("position","fixed");



                $(this).addClass("selected");
                $(this).parent().addClass("selected");
                var to=$(this).prev().offset().top+30;
                var th=$(this).offset().top;
                var tl=$(this).offset().left-200;

                $('.theme-span').show();                
                $('.theme-popover-mask').show();
                $('.theme-popover-mask').height($(document).height());
                $('.theme-popover').slideDown(200);

   if ($ww>640){
                $('.theme-popover').css("top",th);
                $('.theme-popover').css("left",tl);
                $('.theme-popover-mask').hide();
}

$（'.bundle main'）.append（'
\
\
\
\
\
\
\
\
\
“+数据[0]。productname+”\
编辑\
\
\
\
\
\
\
\
”）；
var$ww=$（window.width（）；
$（'.theme login'）。单击（函数（）{
$（document.body）.css（“位置”，“固定”）；
$（此）.addClass（“选定”）；
$（this.parent（）.addClass（“选定”）；
var to=$（this.prev（）.offset（）.top+30；
var th=$（this）.offset（）.top；
var tl=$（this）.offset（）.left-200；
$（'.theme span'）.show（）；
$（'.theme-popover-mask'）.show（）；
$（'.theme-popover-mask'）.height（$（document.height（））；
$（'theme popover'）。向下滑动（200）；
如果（$ww>640）{
$（'.theme popover'）.css（“top”，th）；
$（'.theme popover'）.css（“左”，tl）；
$（'.theme popover mask'）.hide（）；
}

您需要使用DOM遍历来查找

.theme span

、

.theme-popover-mask

和

.theme-popover

元素，这些元素与您单击的元素位于相同的

项目内容中：

var ul = $(this).closest(".item-content");
var span = ul.find(".theme-span");
var popover_mask = ul.find(".theme-popover-mask");
var popover = ul.find(".popover");

你不能单独使用
.closest
，因为它只搜索包含的元素。
我在你添加的HTML中看不到
主题登录
。它与点击它应该显示的元素有什么关系？在应该是
\
的行末尾有一堆
嗨，Barmar，我有updated它。情况是，我已经动态添加了列表，并且我有一个可以单击的部分，以允许用户查看额外信息。但是，我不知道如何显示确切的信息。标记不匹配，您有两个
，在末尾没有匹配的
$（此）。最近的（.item content”）。查找（.theme span）