如何選擇嵌套在另一個元素中的元素？

我試圖添加一個類（添加紅色邊框）到另一個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

如何選擇嵌套在另一個元素中的元素？

回答

相關問題