Используя JavaScript (jQuery), как я могу циклически перебирать все теги «a» на странице, по одному, и назначать каждому отдельный стиль? - PullRequest
Новая
       10

Используя JavaScript (jQuery), как я могу циклически перебирать все теги «a» на странице, по одному, и назначать каждому отдельный стиль?

1 голос
/ 27 сентября 2010

Позвольте мне попытаться объяснить ... Допустим, у меня есть следующие теги '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>

и я хочу перебрать все теги 'a' с классом 'myClass' и прочитать тег alt и на основе его значения назначить определенные атрибуты 'style'.

Я попробовал следующее: 

// 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' tag 'alt' и назначает стиль всем тегам 'a'. То, что я пытаюсь сделать, это прочитать каждый тег 'a', получить значение 'alt' и назначить стиль только для тега 'a' ТОГДА, прочитав следующий тег 'a' ...

Есть ли способ выполнить это, БЕЗ необходимости присваивать уникальный идентификатор или класс каждому тегу 'a'?
Я совершенно новичок в jQuery, часами пытался найти и решить эту проблему, и не могу понять, как это сделать.
Кто-то, ПОЖАЛУЙСТА, помогите.

Ответы [ 2 ]

3 голосов
/ 27 сентября 2010

Вы можете использовать метод each следующим образом: 

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

  // your further code...
});

each будет перебирать все ссылки с классом myClass и получать значение alt каждой ссылки, сохраненное в переменной tmp, с которой вы можете работать.

2 голосов
/ 27 сентября 2010

Вы на самом деле не слишком далеко от того места, где вам нужно быть. 

// 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
  });
});
...