title: Jquery put specific atrr in JSON
body: <p>I have class .canvas has image with class .img-bg and they might have <code>&lt;div class="recntangle"&gt;</code>. I want to get JSON with all source of images with style left and height of .rectangle if there are <code>&lt;div class="recntangle"&gt;</code> </p>
  
  <p>If image/<code>&lt;div class="canvas"&gt;</code>  haven't this <code>&lt;div class="recntangle"&gt;</code> are omit. If image has two or more classes I want to get two objects with one source and two style attributes.</p>
  
  <p>I have code like this</p>
  
  <pre><code>&lt;div class="canvas"&gt;
    &lt;img class="img-bg" src="test.jpg"&gt;
  
    &lt;div class="rectangle ui-draggable ui-resizable" style="left: 10px; height: 341px;"&gt;
      &lt;div class="close"&gt;&lt;/div&gt;
      &lt;div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: block;"&gt;&lt;/div&gt;
      &lt;div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90; display: block;"&gt;&lt;/div&gt;
      &lt;div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90; display: block;"&gt;&lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  
  &lt;div class="canvas"&gt;
    &lt;img class="img-bg" src="example.jpg"&gt;
  &lt;/div&gt;
  
  &lt;div class="canvas"&gt;
    &lt;img class="img-bg" src="image.jpg"&gt;
      &lt;div class="rectangle ui-draggable ui-resizable" style="left: 54px height: 321px;"&gt;
        &lt;div class="close"&gt;&lt;/div&gt;
          &lt;div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: block;"&gt;&lt;/div&gt;
          &lt;div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90; display: block;"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="rectangle ui-draggable ui-resizable" style="left: 43px  height: 295px;"&gt;
      &lt;div class="close"&gt;&lt;/div&gt;
      &lt;div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: block;"&gt;&lt;/div&gt;
      &lt;div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90; display: block;"&gt;&lt;/div&gt;
      &lt;div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90; display: block;"&gt;&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>And script</p>
  
  <pre><code>$( document ).ready(function() {
  
      jsonObj = [];
      $('.img-bg').map(function () {
          var $this = $(this),
              $next = $this.next('.rectangle');
          var src = $this.attr("src");
          var left = $next.css('left');
          var height = $next.css('height')
          item ={}
          item ["src"] = src;
          item ["left"] = left;
          item ["height"] = height;
  
          jsonObj.push(item); 
      }).get();
  
  console.log(jsonObj);
  </code></pre>
  
  <p>I want output like this </p>
  
  <pre><code>0: Object
  height: "341px"
  left: "10px"
  src: "test.jpg"
  1: Object
  height: "321px"
  left: "54px"
  src: "image.jpg"
  2: Object
  height: "295"
  left: "43px"
  src: "image.jpg"
  </code></pre>