SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using jQuery to style list-style-type

    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');
    });

    </script>




    <ul>
    <!--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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    This

    Code:
    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. #3
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm thanks, I'll have a think about how to do that. Cheers

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •