Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Jquery hell!

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #198916
    lprintz
    Participant

    Hello all!

    Could somebody help me with a simple jquery?

    All I’m trying to do is add a class to the first <li> in a list (class=”breadcrumb”)

    Here’s what I’m using and I can’t get it to work :(

    [MOD EDIT – Script tags not working / borked]

    https://jsfiddle.net/xb9xc9su/
    Thanks SO much!

    #198917
    Shikkediel
    Participant

    Let me rephrase – could you provide the HTML as well?

    #198918
    Paulie_D
    Member

    Font Awesome icons are usually, as I recall, in i tags so I suspect it’s the first child of the li.

    So I’d probably be aiming at

    $("ol.breadcrumb li > i").addClass("fa-home");
    

    That said, why use a font-icon on an ordered list…it seems counter-intuitive..but then again, we don’t know what this is supposed to look like.

    #198919
    Paulie_D
    Member
    $("ol.breadcrumb li:first-child").addClass("fa-home");
    

    Would select the first li…assuming the structure is right…

    …as would

    $("ol.breadcrumb li").first().addClass("fa-home");
    

    Lots of ways to do this inJQ

    #198920
    lprintz
    Participant

    Thanks Paulie!

    Yeah, weird situation in that I need to rebuild this site in Ingenuix and can’t set up the breadcrumb exactly as they have it…trying to find workarounds :)

    http://www.plu.edu/advancement/featured-projects/eastvold-restoration/

    Len

    #198921
    Shikkediel
    Participant

    Let me square that rephrasing – could you provide the relevant HTML? Don’t think too many members will start searching for it…

    #198924
    Paulie_D
    Member

    If you look at the structure of that list item

    <li>
    <a class="home" href="http://www.plu.edu/advancement" rel="v:url" property="v:title">
    <i class="fa fa-fw fa-home"></i>
    </a>
    </li>
    

    I’d be aiming at

    $(".breadcrumb li:first-of-type i").addClass("fa-home");

    …but adding these classes with JQ seems a little like overkill. Why not just hard-code it?

    Also, it’s a ul not an ol and it it doesn’t have a class of breadcrumb…it’s an ID.

    so

    $("#breadcrumb li:first-of-type i").addClass("fa-home");

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.