Question

我上课.canvas有图像，类为.img-bg，他们可能有<div class="recntangle">。我希望JSON包含左侧样式和高度为.rectangle的所有图像源，如果有<div class="recntangle">

如果图片/ <div class="canvas">没有此<div class="recntangle">则省略。如果图像有两个或更多个类，我想获得两个具有一个源和两个样式属性的对象。

我有这样的代码

<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>

和脚本

$( 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);

我想要这样的输出

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"

Answer 1

以下是您想要的示例代码。

$(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中有错误。两个底部<div class="rectangle">的CSS样式格式不正确，;和left样式之间缺少height。

Jquery将特定的atrr放在JSON中

1 个答案: