Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    76
    Thanks
    13
    Thanked 3 Times in 3 Posts

    Getting a specific class name with jQuery

    I'm wondering how to achieve gathering a specific class, and only that certain class.
    HTML:
    Code:
    <div class="this top_start bottom_stop that"></div>
    I want to gather ONLY the class that is top_start and bottom_stop. This class can change depending on if a user selects top mid or bottom for each stop or start (9 different combinations). When this is selected it applies the corresponding class to the HTML.

    How does one find the specific class that can change?!
    so I'm looking for
    Code:
     $('*[class*="start"]')
    but I need the actual name of the class and not the object.

    I did see something similar to this
    Code:
    $('element').attr('class').split(' ').pop();
    but the class can be in any area and I'm needing to obtain 2 of the multiple classes as well.

    Any ideas?! Thanks in advance!

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    I think it's just $('.top_start bottom_stop');
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    76
    Thanks
    13
    Thanked 3 Times in 3 Posts
    but I need the actual name of the class and not the object.
    I need it to pop() me the correct class not a jQuery object.

  • #4
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    I don't really understand the question, to be honest. But maybe you can use a variation of what you posted?

    Code:
    $('element').attr('class').split(' ').filter( function(value) { ... } ).pop();
    https://developer.mozilla.org/en/doc...s/Array/filter

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    maybe you need hasClass() ?
    http://api.jquery.com/hasClass/

  • #6
    New Coder
    Join Date
    Nov 2010
    Posts
    76
    Thanks
    13
    Thanked 3 Times in 3 Posts
    I know it's kinda a difficult question to understand and wonder WHY WOULD THIS KID WANNA DO THAT?!!!? but it's for sure the only route i have. hasClass() won't work cause i don't know what class I'm getting! .. i do know that the class will always end with "_start" or "_stop" so when I achieve getting JUST the class name then I can do a
    hasClass($myclass); it's getting to that point thats the problem.

    I basically want to do something like this
    Code:
    $('div').attr('class').split(' ').pop(/\_start$/) // for start
    but pop() doesn't accept any parameters and I don't know how to code it
    Last edited by joanzn; 04-24-2013 at 08:01 PM.

  • #7
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    So then do what I said:

    Code:
    $('element').attr('class').split(' ').filter( function(value) { return /(_start|_end)$/.test( value ); } ).pop();

  • Users who have thanked Airblader for this post:

    joanzn (04-25-2013)

  • #8
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    pop() only removes the last element from an array and returns it.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 584 Times in 565 Posts
    Code:
    "this top_start trash bottom_stop that"
      .match( /(\w+_start\b)|(\w+_stop\b)/g);
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #10
    New Coder
    Join Date
    Nov 2010
    Posts
    76
    Thanks
    13
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by Airblader View Post
    So then do what I said:

    Code:
    $('element').attr('class').split(' ').filter( function(value) { return /(_start|_end)$/.test( value ); } ).pop();
    Totally right! I must have overlooked your comment.
    but like Wolf said.
    pop() only removes the last element from an array and returns it.
    I separated it to be 2 vars one for start and one for stop:
    Code:
    $('element').attr('class').split(' ').filter( function(value) { return /_start$/.test( value ); } ).pop();
    Well done

  • #11
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    some of replies were a little beyond me, but i think i get the drift, and anyway it's a way to learn.

    i have a question tho, and a comment/question. how does one know, from the script given, that the class is being correctly selected ? what i mean is, is 'return' showing it somewhere ? how would i phrase an alert to see the result ? or is it shown in the console ? ok. 4 questions.

    when i ran the last js, the console said "Uncaught TypeError: Cannot call method 'split' of undefined". doesn't that mean it is not running right ?

  • #12
    New Coder
    Join Date
    Nov 2010
    Posts
    76
    Thanks
    13
    Thanked 3 Times in 3 Posts

    How it works

    Well you have to have jquery linked to your page for starters if you didn't do that. and to alert that you would assign that code to a variable and go
    Code:
    alert(yourVar); /* OR */  console.log(yourVar)
    that will give you the classes it's pulling. So you'd have
    Code:
    var yourVar = $('element').attr('class').split(' ').filter( function(value) { return /_start$/.test( value ); } ).pop();
    it's 'returning' the matched 'value' . What that script is doing is grabbing all the classes on the given object. $('object') then it's splitting them by the ' '
    (a space)
    then it's filtering them with a regular expression looking for any that end with start or stop. then it tests that the value matches in the filter function. after that it 'pops' the last element of an array, since there was only one match, there's only one thing in the array so it'll pop 'mid, top or bottom_start'
    Last edited by joanzn; 05-03-2013 at 06:44 PM.


  •  

    Tags for this Thread

    Posting Permissions

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