Using jQuery to style list-style-type

JavaScript
1

Hi guys,
This is probably quite a simple problem but I can’t figure out the answer. I’m working on a site that has news stories and events coming in. What I would like is to have the news stories to be styled with squares and events with discs for instance. I might be able to change the actual plug-in so the CSS affects this change, but I just wondered how I could change the list-style-type with jQuery.

Many thanks!

Jonno

My code is as follows:

<script type=“text/javascript”>
$(‘document’).ready(function () {
$(‘li a[href^=“/newsandevents-1/diaryofevents”]’).css(‘list-style-type’, ‘disc’);
$(‘li a[href^=“/news_and_events-1/news_archive”]’).css(‘list-style-type’, ‘circle’);
});

&lt;/script&gt;

[HR][/HR]

&lt;ul&gt;

<!–Events–>
<li><a href=“/newsandevents-1/diaryofevents/generalevents/oct2011/ajazahmed.aspx”>20 Oct: Ajaz Ahmed - the founder of Freeserve.</a>​</li>

<!–News–>
<li><a href=“/news_and_events-1/news_archive/2011newsarchive/oct/academicappointedtoinnertemple.aspx”>University Law professor appointed to prestigious Inner Temple.</a></li>
</ul>

2

This

li a[href^="/newsandevents-1/diaryofevents"]

only applies to the anchor elements, but the list-style-type is a property of the LIs, so you need to involve some kind of parent selector. I don’t know how to do that with jQ, though.

3

Hmm thanks, I’ll have a think about how to do that. Cheers

4

Figured it out, here’s the solution:
$(‘li:has(a[href^=“/news_and_events-1/news_archive”])’).css(‘list-style-type’, ‘square’);

Selects list items: that have links: that contain that address.

Thanks for the help Ralph.