Javascript Jquery将特定的atrr放在JSON中

我有class.canvas有class.img bg的图像，它们可能有

。我想获得JSON，如果有

如果图像/

没有，则此

被忽略。若图像有两个或两个以上的类，我想得到两个具有一个源和两个样式属性的对象

我有这样的代码

<div class="canvas">
  <img class="img-bg" src="test.jpg">

  <div class="rectangle ui-draggable ui-resizable" style="left: 10px; height: 341px;">
    <div class="close"></div>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: block;"></div>
    <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90; display: block;"></div>
    <div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90; display: block;"></div>
  </div>
 </div>

<div class="canvas">
  <img class="img-bg" src="example.jpg">
</div>

<div class="canvas">
  <img class="img-bg" src="image.jpg">
    <div class="rectangle ui-draggable ui-resizable" style="left: 54px height: 321px;">
      <div class="close"></div>
        <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: block;"></div>
        <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90; display: block;"></div>
  </div>
  <div class="rectangle ui-draggable ui-resizable" style="left: 43px  height: 295px;">
    <div class="close"></div>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: block;"></div>
    <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90; display: block;"></div>
    <div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90; display: block;"></div>
  </div>

我想要这样的输出

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"

---

下面是您想要的示例代码

$(document).ready(function () {
    jsonObj = [];
    $('.img-bg').map(function () {
        var self = this;
        var next = $(this).nextAll('.rectangle');

        if (next.length > 0) {
            next.map(function () {
                item = {};
                item.src = self.src;
                item.left = $(this).css('left');
                item.height = $(this).css('height');

                jsonObj.push(item);
            });
        }
    });

    console.log(jsonObj);
});

---

请注意，您的HTML中有一个错误。底部的两个

有格式错误的CSS样式，它们有一个

左侧

和

高度

样式之间缺少code>。

我真的很好奇，为什么所有的标记都在画布元素中？它不是画布元素，它是一个

类，名为

画布

。它更重要，这是为了创建类似jcrop的东西。它正在画长方形img@SparoHawk-天哪，我想我必须多加注意，我只是注意到了“画布”，并想“这是一种多么奇怪的做事方式”！它被称为不同的这没关系我只想得到一份报告

$(document).ready(function () {
    jsonObj = [];
    $('.img-bg').map(function () {
        var self = this;
        var next = $(this).nextAll('.rectangle');

        if (next.length > 0) {
            next.map(function () {
                item = {};
                item.src = self.src;
                item.left = $(this).css('left');
                item.height = $(this).css('height');

                jsonObj.push(item);
            });
        }
    });

    console.log(jsonObj);
});