使用 JavaScript (jQuery)，我如何循环遍历所有“a”？页面上的标签，一次一个，并为每个标签分配单独的样式？

Question

让我尝试解释一下...假设我在页面上有以下“a”标签：

<a href="img1.jpg" class="myClass" alt="0,0,600,200"></a>
<a href="img2.jpg" class="myClass" alt="200,0,600,75"></a>
<a href="img3.jpg" class="myClass" alt="275,0,600,200"></a>
<a href="img4.jpg" class="myClass" alt="475,0,600,50"></a>
<a href="img5.jpg" class="myClass" alt="525,0,600,100"></a>
<a href="img6.jpg" class="myClass" alt="625,0,600,200"></a>

并且我想循环遍历具有“myClass”类的所有“a”标签并读取 alt 标签并根据其值分配特定的值“风格”属性。

我尝试了以下操作：

// get value of alt attribute
var tmp = $("a.myClass").attr('alt');
// split value into an array
var partsArray = tmp.split(',');
// assign array values to a dedicated variable
var a = partsArray[0];
var b = partsArray[1];
var c = partsArray[2];
var d = partsArray[3];

// create inline style string
var style;
style = style + "position:absolute;display:block;";
style = style + "border:1px solid red;";
style = style + "width:" + c + "px;";
style = style + "height:" + d + "px;";
style = style + "top:" + a + "px;";
style = style + "left:" + b + "px;";

// add the style attribute and its value
$('a.myClass').attr('style', style);

但它采用第一个“a”标签“alt”属性的值并将样式分配给所有“a”标签。我想做的是读取每个“a”标签，获取“alt”值并为该“a”标签分配样式，然后读取下一个“a”标签...

有没有一种方法可以完成此操作而不需要必须为每个“a”标签分配唯一的 ID 或类？
我对 jQuery 完全陌生，花了几个小时尝试和谷歌搜索这个问题，但不知道如何解决。
请有人帮忙。

Answer 1

您可以使用 each 方法，如下所示：

$('a.myClass').each(function(){
  var tmp = $(this).attr('alt');

  // your further code...
});

every 将迭代 myClass 类的所有链接，并获取存储在您可以操作的 tmp 变量中的每个链接的 alt 值。

Answer 2

事实上，你离你需要去的地方并不太远。

// get value of alt attribute
$("a.myClass").each(function() {
  var tmp = $(this);

  // split value into an array
  var partsArray = tmp.attr("alt").split(',');

  // assign array values to a dedicated variable
  var t = partsArray[0];
  var l = partsArray[1];
  var w = partsArray[2];
  var h = partsArray[3];

  tmp.css({
    "position" : "absolute",
    "display" : "block",
    "border" : "1px solid red",
    "width" : w,
    "height" : h,
    "top" : t,
    "left" : l
  });
});