Question

我有img和div的列表。我想获得图像和高度的src，div的左边。这是我的代码：

<img class="img-bg" src="test.jpg">
<div class="rectangle" style="left: 252px; height: 198px;"></div>
<img class="img-bg" src="test1.jpg">
<div class="rectangle" style="left: 202px; height: 108px;"></div>


<script>
  $( document ).ready(function() {
    var arr = new Array();
    var counter = 0;
    $('.img-bg').each(function() {     

      var src = $(this).attr("src"); 
      arr[counter] = new Array(src);
        counter++;
    });
    var counter = 0;

    $('.rectangle').each(function() {

      var width = $(this).css("left");
      var height = $(this).css("height");
      arr[counter].push(width, height);
      counter++;

    });


 console.log(arr[0]);
 console.log(arr[1]);


});

这是有效的，但我想知道是否有更好的解决方案。

编辑：一切都应该在1个阵列中。像这样的东西 [“test.jpg”，“252px”，“198px”] [“test1.jpg”，“202px”，“108px”]

Answer 1

您可以使用.map()和.next()

$(document).ready(function () {
    var arr = $('.img-bg').map(function () {
        var $this = $(this),
            $next = $this.next('.rectangle');
        return [[$this.attr("src"), $next.css('left'), $next.css('height')]]
    }).get();

    console.log(arr[0]);
    console.log(arr[1]);
});

演示：Fiddle

Answer 2

尝试

var srcArray = [];
var leftArray = [];
var heigthArray = [];
$("img").each(function () {
    srcArray.push($(this).attr("src"));
});


$("div").each(function () {
    leftArray.push($(this).css("left"));
    heigthArray.push($(this).css("height"));
});

Answer 3

您可以使用 .map() ：

var srcArr = $('.img-bg').map(function () {
    return $(this).attr("src");
}).get();

Fiddle Demo

Answer 4

使用以下

<script>

var src1=[], left1=[], heigth1=[],counter1=0,counter2=0;

$("img").each(function(){

  src1[counter1]=$(this).attr("src");
  counter1+=1;
 });


$("div").each(function(){
  left1[counter2]=$(this).css("left");
  heigth1[counter2]=$(this).css("height");
    counter2+=1;
 });

</script>

演示=＆GT; http://jsfiddle.net/5mybd/4/

jQuery将元素的attr放入数组中

4 个答案: