title: Javascript Get the children of an anchor
body: <p>I want to change the src of the image inside the a tag using javascript code.For that I used this code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function changestyle(cat) {
  
    var el = $(cat).find('.img_box').attr('id');
  
    console.log(el);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;a href="#" onclick="changestyle(this);" id="onc_2"&gt;
    this is the first anchor
    &lt;div class=""&gt;hello&lt;/div&gt; 
    &lt;div class="img_box" id='gtrf'&gt;
      &lt;a href="" class="yyy" id='tttt'&gt;
        &lt;img src="images/arrows_list.png" class="c1"/&gt;
        image1 to be changed
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/a&gt;
   &lt;a href="#" onclick="changestyle(this);" id="onc_2"&gt;
    this is second anchor
      &lt;div class=""&gt;hello&lt;/div&gt; 
      &lt;div class="img_box" id='gtrf'&gt;
      &lt;a href="" class="yyy" id='tttt'&gt;
        &lt;img src="images/arrows_list.png" class="c1"/&gt;
       image2 to be changed with the onclick action
      &lt;/a&gt;
     &lt;/div&gt;
     &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But I always get undefined in the console. When I remove the <code>&lt;a&gt;</code> inside the clicked <code>&lt;a&gt;</code> it works. Is there any way to change the src of the image by clicking on the first <code>&lt;a&gt;</code>?</p>