Question

I am trying to alter the ins tag style attribute on html which looks like this

<ul>
  <li class="pad">
    <a>
     <ins style="margin-left: 5px"></ins>
    </a>
  </li>
  <li class="no_pad">
    <a>
      <ins style="margin-left: 0px"></ins>
    </a>
  </li>
  <li class="pad">
    <a>
      <ins style="margin-left: 5px"></ins>
    </a>
  </li>
<ul>

I only want to grab the list elements with the “pad” class tag. How can I grab all the list elements and then get down to the ins tag to edit the style attribute on it?

Answer 1

Use a simple CSS selector:

$('li.pad ins').css('cssPropertyName', 'CssPropertyValue');

This will add the cssPropertyName property, and set its value to the supplied cssPropertyValue.

If you’d rather, albeit unnecessarily, use the attr() method:

$('li.pad ins').attr('style', function(i, v) {
    return v + 'cssPropertyName: cssPropertyValue;'
});

References:

• attr().
• css().