javascript - jQuery 找到最近的

Question

我正在尝试获取列表项的 href。

HTML

<div class="popup" style="display: none;">
    <div class="product">           
        <div class="photo">
            <a href="" class="sendkleur" id="link69"> <!-- href im trying to reach -->     
                <img id="product-collection-image-69" src="" alt="Test kleur" class="popup-image69"> 
            </a>
        </div>
        <a href="" class="sendkleur" id="link69">        
           <strong>Test kleur</strong>  
        </a>
        <span class="swatchLabel-category">Kleur:</span>
        <p class="float-clearer"></p>
       <div class="swatch-category-container" style="clear:both;" id="ul-attribute137-69">
             <img onclick="listSwitcher();" src="" id="a137-32" class="swatch-category" alt="Beige" width="12px" height="12px" title="Beige">
              <img onclick="listSwitcher();" src="" id="a137-36" class="swatch-category" alt="Zwart" width="12px" height="12px" title="Zwart">
        </div>
    <p class="float-clearer"></p>    
    </div>                   
</div>

网站上有多个弹出窗口，这就是让它变得困难的原因。一开始我用的是这段代码

var link = jQuery('.photo').find('a')[0].getAttribute("href");

但这当然只返回第一个弹出窗口的href。然后我尝试了这段代码:

var link = jQuery('.photo').closest('a').attr("href");

但这返回了 undefined

然后我试了一下:

 var link = jQuery(this).closest('a').attr("href");

但这也会返回 undefined

编辑这是整个 jQuery 代码片段

jQuery(document).ready(function(){
    jQuery('.swatch-category-container img').click(function(){


        var kleur = jQuery(this).attr('title');
        var link = jQuery('.photo').find('a').attr("href");
        console.log(link);
        link += "?kleur="+kleur;
        console.log(link);
        jQuery('.photo').find('.sendkleur').attr("href", link);


    });
});

Answer 1

从 .swatch-category-container img 元素开始，您可以遍历 DOM 以找到所需的 a，如下所示:

$('.swatch-category-container img').click(function() {
    var link = $(this).closest('.popup').find('.photo a').prop('href');

    // do something with link here...
});