title: How to get image src from specific element
body: <p>My sample <strong>html</strong> section with <strong>several items</strong> like this:</p>
  
  <pre><code>&lt;ul class="catalog"&gt;
    &lt;li class="catalog_item catalog_item--default-view"&gt;
      &lt;div class="catalog_item_image"&gt;
        &lt;img src="/img/01.png" alt="model01" class="catalog_item_icons__big-foto"&gt;
     &lt;/div&gt;
     &lt;ul class="catalog_item_icons"&gt;
        &lt;li class="catalog_item_icons__preview"&gt;&lt;img src="/img/01-01.png" alt="01" class="catalog_item_icons__preview--foto-small"&gt;&lt;/li&gt;
        &lt;li class="catalog_item_icons__preview"&gt;&lt;img src="/img/01-02.png" alt="02" class="catalog_item_icons__preview--foto-small"&gt;&lt;/li&gt;
        &lt;li class="catalog_item_icons__preview"&gt;&lt;img src="/img/01-03.png" alt="03" class="catalog_item_icons__preview--foto-small"&gt;&lt;/li&gt;
     &lt;/ul&gt;
  </code></pre>
  
  <p>I want to 
  change src of <strong>img.catalog_item_icons__big-foto</strong> 
    with 
  src of <strong>img.catalog_item_icons__preview--foto-small</strong> </p>
  
  <p>after clicking on li element <strong>only in it's parent</strong> ul.catalog.</p>
  
  <p>That was my try:</p>
  
  <pre><code>$(".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);
  
    });
  
  });
  </code></pre>
  
  <p>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 :(</p>