Jquery.each，但仅限于当前元素

Jquery .each, but only that current element

本文关键字：于当前 元素 each Jquery      更新时间：2023-09-26

我正在使用以下脚本

$('.cat_glass_thumbs ul li').each(function(){
    $(this).click(function(){
        orig_src = $(this).attr('data-orig');
        $('.cat_glass_thumbs a img').attr('src', orig_src);
    });
});

我有一个循环，它输出多个div，所有这些div都是相同的结构，不同的内容。

现在，我的jquery工作在".cat_glass_thumbs"div上，如果我点击li，它会更新每个.cat_glas_humb中的src，而不仅仅是更新我所在的src。

提示/指针将不胜感激

html供参考：

<div class="cat_glass_thumbs">
      <a href="" title="Black/Silver" class="product-image thumbnail">
          <span class="main_image">
               <img src="t/2064-a-blk-slv-52-angle.jpg" alt="Black/Silver">
          </span>
      </a>

       <ul id="thumbs_container">
            <li class="img_thumbs" data-orig="/t/-2064-a-blk-slv-52-angle.jpg">
            </li>
            <li class="img_thumbs" data-orig="/t/-2064-a-blk-slv-52-front.jpg">
            </li>
             <li class="img_thumbs" data-orig="/t/-2064-b-blk-gld-52-angle.jpg">
             </li>
        </ul>
     </div>

删除each，在这种情况下它是无用的（jQuery会自动为您执行）：

$('.cat_glass_thumbs ul li').click(function(){
    var orig_src = $(this).data('orig');
    $('a img', this).attr('src', orig_src);
});

JS Fiddle演示

请注意，我以jQuery文档中描述的$( selector [, context ] )的形式使用了$('a img', this)。

编辑

仅你的JS代码就让我想到了另一种HTML结构。为了适合您发布的图像，您需要使用$.closest():瞄准父.cat_glass_thumbs中的图像

$('.cat_glass_thumbs ul li').click(function(){ 
    var orig_src = $(this).data('orig');
    $('a img', $(this).closest('.cat_glass_thumbs')).attr('src', orig_src);
});

更新的JS Fiddle

$.closest（）

描述：对于集合中的每个元素，通过测试元素本身并在DOM树中遍历其祖先来获得与选择器匹配的第一个元素。

我认为这会起作用：

$('.cat_glass_thumbs ul li').each(function(){
    $(this).click(function(){
        orig_src = $(this).attr('data-orig');
        $(this).find("a img").attr('src', orig_src);
    });
});

$（this）元素在您的示例中指向所有'.cat_lass_thumbs ul-li'，您必须将变量传递给$.每个

$('.cat_glass_thumbs ul li').each(function($currentElement){
    $currentElement.click(function(){
        orig_src = $(this).attr('data-orig');
        $(this).children("img").attr('src', orig_src);
    });
});
相关文章：