Databases
StackOverflow2013
Postsdbo
POUsing JavaScript (jQuery), how can I cycle through all 'a' tags on a page, one at a time, and assign an individual style to each?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing JavaScript (jQuery), how can I cycle through all 'a' tags on a page, one at a time, and assign an individual style to each?
    primarykey
    data
    text
    <p>Let me try to explain... Lets say I have the following 'a' tags on a page:</p> <pre><code>&lt;a href="img1.jpg" class="myClass" alt="0,0,600,200"&gt;&lt;/a&gt; &lt;a href="img2.jpg" class="myClass" alt="200,0,600,75"&gt;&lt;/a&gt; &lt;a href="img3.jpg" class="myClass" alt="275,0,600,200"&gt;&lt;/a&gt; &lt;a href="img4.jpg" class="myClass" alt="475,0,600,50"&gt;&lt;/a&gt; &lt;a href="img5.jpg" class="myClass" alt="525,0,600,100"&gt;&lt;/a&gt; &lt;a href="img6.jpg" class="myClass" alt="625,0,600,200"&gt;&lt;/a&gt; </code></pre> <p>and I want to cycle through all 'a' tags with class 'myClass' and read the alt tag and based on its value assign specific 'style' attributes.</p> <p>I tried the following:</p> <pre><code>// 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); </code></pre> <p>but it takes the value of the first 'a' tag 'alt' attribute and assigns the style to all 'a' tags. What I am trying to do is read each 'a' tag, get the 'alt' value and assign a style to THAT 'a' tag only THEN read the next 'a' tag ...</p> <p>Is there a way to accomplish this WITHOUT having to assign a unique ID or class to each 'a' tag?<br> I am totally new to jQuery and have spent hours trying and googleing this issue and can't figure out how.<br> Someone PLEASE help.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USAngie
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POUsing JavaScript (jQuery), how can I cycle through all 'a' tags on a page, one at a time, and assign an individual style to each?
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload