ansaurus

Question

Changing the attribute of a tag with jquery

Answer 1

+2 A:

A few things:

Use css() to set the style attribute;
Because the <ul> is within the list element, the bold will apply to the child list elements as well.

So you have two options:

Wrap the text in a <span>; or
Set the font weight to bold and then the child list elements to font weight normal.

For the first one, getting the text node only is a little tricky but can be done. Try:

$("ol > li").each(function() {
  $($(this).contents()[0]).wrap("<span>").parent()
    .css({margin: "1em", fontWeight: "bold"});
});

The output is:

<ol>
  <li><span style="margin: 1em; font-weight: bold;">Comp 250 </span>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>CGI</li>
      <li>PHP</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li><span style="margin: 1em; font-weight: bold;">Comp 345 </span>
    <ul>
      <li>Objects and classes</li>
      <li>Static and constant members</li>
      <li>Operator overloading</li>
      <li>Templates</li>
      <li>Inheritance</li>
      <li>Polymorphism</li>
    </ul>
  </li>
  <li><span style="margin: 1em; font-weight: bold;">Comp 431 </span>
    <ul>
      <li>Perl language</li>
      <li>File uploads and downloads</li>
      <li>AJAX and JSON</li>
      <li>Java Servlets</li>
      <li>JSP</li>
    </ul>
  </li>
</ol>

Alternatively you can change the font weight on the inner lists:

$("ol > li").css({margin: "1em", fontWeight: "bold"})
  .find("ul").css({fontWeight: "normal"});

cletus 2010-02-28 02:11:52

that works but changes everything to bold, I only want to affect the first items that is Comp 250, Comp345, Comp431

Zerobu 2010-02-28 02:14:20

I forgot to mention, any jquery that i am doing is going in the ready function, will that make a difference?

Zerobu 2010-02-28 02:16:42

Add this to unbold the child list`$("ol li li").css({fontWeight: "normal"});`

o.k.w 2010-02-28 02:17:48

ansaurus

tags:

views:

answers:

Changing the attribute of a tag with jquery

related questions