CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nikolay Ignatyev
Nikolay Ignatyev

Reputation: 123

How to get image src from specific element

My sample html section with several items like this:

<ul class="catalog">
  <li class="catalog_item catalog_item--default-view">
    <div class="catalog_item_image">
      <img src="/img/01.png" alt="model01" class="catalog_item_icons__big-foto">
   </div>
   <ul class="catalog_item_icons">
      <li class="catalog_item_icons__preview"><img src="/img/01-01.png" alt="01" class="catalog_item_icons__preview--foto-small"></li>
      <li class="catalog_item_icons__preview"><img src="/img/01-02.png" alt="02" class="catalog_item_icons__preview--foto-small"></li>
      <li class="catalog_item_icons__preview"><img src="/img/01-03.png" alt="03" class="catalog_item_icons__preview--foto-small"></li>
   </ul>

I want to change src of img.catalog_item_icons__big-foto with src of img.catalog_item_icons__preview--foto-small

after clicking on li element only in it's parent ul.catalog.

That was my try:

$(".catalog_item_icons__preview").each(function () {
  $(this).on("click", function() {
    console.log('Clicked preview!');
    // get image fileName
    var smallImagePath = $(this).children("img").attr("src");
    console.log("small image: " + smallImagePath);
    var $bigPreview = $(this).closest('img.catalog_item_icons__big-foto').attr("src");

    // print in console src of nearest big image
    console.log($bigPreview);

  });

});

I can get the src of small image, but can't even read the src of the img above in tree. Output in console: undefined. Don't understand why :(

Upvotes: 2

Views: 2287

Answers (5)

Viktor Maksimov
Viktor Maksimov

Reputation: 1465

Use this script:

$(document).ready(function() {
    //It is executing a function when it is clicked on an item
    $('.catalog_item_icons li').click(function() {
        //Taking the source of the image of the clicked element.
        //with $('img', this) you are choosing the the image in the clicked element
        _src = $('img', this).attr('src');
        //In the next line I am assigning to the _obj variable - the parent .catalog_item--default-view of the clicked element
        _obj = $(this).parents('.catalog_item--default-view');
        //In the next line i am changing the source attribute of the .catalog_item_icons__big-foto located in the _obj object
        $('.catalog_item_icons__big-foto', _obj).attr('src', _src);
    });
});

Upvotes: 2

Krupesh Kotecha
Krupesh Kotecha

Reputation: 2412

Try this

$(".catalog_item_icons__preview").click(function() {
  $(".catalog_item_icons__big-foto").attr("src", $(this).children("img").attr("src"));
  console.log($(".catalog_item_icons__big-foto").attr("src"));
});
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="catalog_item_image">
  <img src="/img/01.png" alt="model01" class="catalog_item_icons__big-foto">
</div>
<ul class="catalog_item_icons">
  <li class="catalog_item_icons__preview">
    <img src="/img/01-01.png" alt="01" class="catalog_item_icons__preview--foto-small">
  </li>
  <li class="catalog_item_icons__preview">
    <img src="/img/01-02.png" alt="02" class="catalog_item_icons__preview--foto-small">
  </li>
  <li class="catalog_item_icons__preview">
    <img src="/img/01-03.png" alt="03" class="catalog_item_icons__preview--foto-small">
  </li>
</ul>

Upvotes: 0

Subodh Ghulaxe
Subodh Ghulaxe

Reputation: 18651

This may help you, check console following code is working for me 

$("li.catalog_item_icons__preview").on("click", function(){
    // get image fileName
    var smallImagePath = $(this).children("img").attr("src");
    console.log("small image: " + smallImagePath);
    var bigPreview = $(this).parent('ul').siblings(".catalog_item_image").children(".catalog_item_icons__big-foto").attr("src");

    // print in console src of nearest big image
    console.log(bigPreview);
});


$("li.catalog_item_icons__preview").on("click", function(){
    // get image fileName
    var smallImagePath = $(this).children("img").attr("src");
    console.log("small image: " + smallImagePath);
    var bigPreview = $(this).parent('ul').siblings(".catalog_item_image").children(".catalog_item_icons__big-foto").attr("src");

    // print in console src of nearest big image
    console.log(bigPreview);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="catalog">
  <li class="catalog_item catalog_item--default-view">
    <div class="catalog_item_image">
      <img src="/img/01.png" alt="model01" class="catalog_item_icons__big-foto">
   </div>
   <ul class="catalog_item_icons">
      <li class="catalog_item_icons__preview"><img src="/img/01-01.png" alt="01" class="catalog_item_icons__preview--foto-small"></li>
      <li class="catalog_item_icons__preview"><img src="/img/01-02.png" alt="02" class="catalog_item_icons__preview--foto-small"></li>
      <li class="catalog_item_icons__preview"><img src="/img/01-03.png" alt="03" class="catalog_item_icons__preview--foto-small"></li>
   </ul>
  </li>
</ul>

Upvotes: 0

Shailendra Sharma
Shailendra Sharma

Reputation: 6992

problem is here The closest() method returns the first ancestor of the selected element.An ancestor is a parent, grandparent, great-grandparent, and so on.

 var $bigPreview = $(this).closest('img.catalog_item_icons__big-foto').attr("src");

you just use class that will work for you 

 var $bigPreview = $('img.catalog_item_icons__big-foto').attr("src");

Upvotes: 0

epascarello
epascarello

Reputation: 207501

catalog_item_icons__big-foto is not a direct ancestor so closest will not find it. The closest metod looks at itself and than looks at parents. The element you are looking for is not a parent, it is a child of one of those parents.

Easiest thing is to look for the top li and find the image from there.

$(this).closest(".catalog_item catalog_item--default-view")
    .find('img.catalog_item_icons__big-foto')

or option is to find the parent ul and find the previous sibling and than find the image.

Upvotes: 0

Related Questions