CODEWITHSUNDEEP
jquery
blyszczacaOsmiornica
blyszczacaOsmiornica

Reputation: 1

How select an element nested in another element?

I trying to add a class(adding red border) to an image that is inside of another div. I need to use data-attr to get it. I already did the first part of this, here's my code:

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

});

Upvotes: 0

Views: 53

Answers (1)

jafarbtech
jafarbtech

Reputation: 7015

Add $(this).find("img").click(function(){ which fill find the img tag within the current 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>

Upvotes: 1

Related Questions