How select an element nested in another element?

Question

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

});

.find looks inside the element in the selector. In your case this is the element which has the data-attribute, and there are no elements within it that also have the attribute, so it won't find anything. $("img", this) should get you the image, instead of $(objectWithIdValue).find("img"). Additionally, I assume you realise that none of your code is setting a border or class of any kind. — ADyson
– ADyson, Commented Dec 5, 2016 at 15:13
try var objectWithIdValue = $(this).is("[data-delivery-method='" + idValue + "']") ? $(this):"Not this element" and see if it get the right element — sTx
– sTx, Commented Dec 5, 2016 at 15:18

jafarbtech · Accepted Answer · 2016-12-05 15:24:04Z

1

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>

answered Dec 5, 2016 at 15:24

jafarbtech

7,0551 gold badge41 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sTx Over a year ago

It's good, if he doesn't need that idValue for a specific reason

jafarbtech Over a year ago

yaah... he is comparing its attr within the same element. he might have been confused about the usage of $(this). thats why i explained this easy way

Collectives™ on Stack Overflow

How select an element nested in another element?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related