如何选择嵌套在另一个元素中的元素？

我试图添加一个类（添加红色边框）到另一个div内的图像。我需要使用data-attr来获取它。我已经做的这第一部分，这里是我的代码：如何选择嵌套在另一个元素中的元素？

HTML：

<div class="delivery-method col-lg-5"> 
<div class="letter row" data-delivery-method="letter" > 
    <div class="col-lg-4"> 
    <input type="radio" name="choose-delivery-metod" value="box" checked> 
    <img src="{url}../../../assets/website/img/letter.png" alt="Paczka"> 
    </div> 
    <div class="col-lg-8"> 
    <span class="deliver-method-name">KOPERTA</span> 
    <span>JUŻ OD 11.48ZŁ</span> 
    </div> 
</div> 
<div class="box row" data-delivery-method="box"> 
    <div class="col-lg-4"> 
    <input type="radio" name="choose-delivery-metod" value="letter"> 
    <img src="{url}../../../assets/website/img/box.png" alt="List"> 
    </div> 
    <div class="col-lg-8"> 
    <span class="deliver-method-name">PACZKA</span> 
    <span> JUŻ OD 11.48ZŁ </span> 
    </div> 
</div>

的JavaScript：

$("div[data-delivery-method]").click(function(){ 

    var idValue= $(this).attr("data-delivery-method"); 
    var objectWithIdValue = $(this).find("[data-delivery-method='" + idValue + "']"); 

    //not working 
    $(objectWithIdValue).find("img").click(function(){ 
     console.log(this); 
    }); 
    //not working -end 

});

来源

2016-12-05 blyszczacaOsmiornica

.find在选择器中查找_inside_元素。在你的情况下，'this' _is_是具有data-attribute的元素，并且它中没有元素也具有该属性，所以它不会找到任何东西。 '$（“img”，this）'应该得到你的图像，而不是'$（objectWithIdValue）.find（“img”）'。另外，我假设你意识到你的代码没有设置任何类型的边框或类。 – ADyson

尝试'var objectWithIdValue = $（this）.is（“[data-delivery-method ='”+ idValue +“'”））？ $（this）：“Not this element”'看看它是否得到正确的元素 – sTx

它的工作原理！谢谢！ – blyszczacaOsmiornica

添加$(this).find("img").click(function(){填补找到当前中img标签selected div

$("div[data-delivery-method]").click(function(){ 
 

 
    //not working 
 
    $(this).find("img").click(function(){ 
 
     $(this).addClass("red"); 
 
     console.log(this); 
 
    }); 
 
    //not working -end 
 

 
});

.red{ 
 
    border:solid 1px red; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="delivery-method col-lg-5"> 
 
<div class="letter row" data-delivery-method="letter" > 
 
    <div class="col-lg-4"> 
 
    <input type="radio" name="choose-delivery-metod" value="box" checked> 
 
    <img src="{url}../../../assets/website/img/letter.png" alt="Paczka"> 
 
    </div> 
 
    <div class="col-lg-8"> 
 
    <span class="deliver-method-name">KOPERTA</span> 
 
    <span>JUŻ OD 11.48ZŁ</span> 
 
    </div> 
 
</div> 
 
<div class="box row" data-delivery-method="box"> 
 
    <div class="col-lg-4"> 
 
    <input type="radio" name="choose-delivery-metod" value="letter"> 
 
    <img src="{url}../../../assets/website/img/box.png" alt="List"> 
 
    </div> 
 
    <div class="col-lg-8"> 
 
    <span class="deliver-method-name">PACZKA</span> 
 
    <span> JUŻ OD 11.48ZŁ </span> 
 
    </div> 
 
</div>

来源

2016-12-05 15:24:04 jafarbtech

这很好，如果他不需要'idValue'因为某个特定的原因 – sTx

yaah ...他在同一个元素中比较它的'attr'。他可能会对'$（this）'的用法感到困惑。这就是为什么我解释这个简单的方法 – jafarbtech

如何选择嵌套在另一个元素中的元素？

回答

相关问题