Jquery 将特定的 atrr 放入 JSON答案

【问题标题】：Jquery put specific atrr in JSONJquery 将特定的 atrr 放入 JSON
【发布时间】：2014-03-14 15:48:56
【问题描述】：

我的 .canvas 类有 .img-bg 类的图像，他们可能有 <div class="recntangle">。如果有<div class="recntangle">

如果 image/<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"

【问题讨论】：

我真的很好奇，为什么你的所有标记都在画布元素中？
它不是一个画布元素，它是一个 <div> 和一个名为 canvas 的类。
更多，这是为了创建类似 jcrop 的东西。它在 img 上绘制矩形
@SparoHawk - 天哪，我想我必须多加注意，我刚刚注意到“画布”并认为“做事的方式多么奇怪”！
它被称为不同的没关系我只想得到属性

标签： javascript jquery json dom

【解决方案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 样式之间缺少一个 ;。

【讨论】：