javascript - Jquery .each，但仅限当前元素

Question

我正在使用以下脚本

$('.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的循环，它们都有相同的结构，不同的内容。

对，我的 jquery 工作于“.cat_glass_thumbs”div，如果我轻击 li，它将更新每个 .cat_glass_thumb 中的 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>

Answer 1

删除each，在这种情况下它是没有用的(jQuery 自动为你做这件事):

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

JS Fiddle Demo

请注意，我以 jQuery documentation 中描述的 $(选择器 [, 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);
});

Updated JS Fiddle

$.closest()

Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.