Using jQuery to determine an element's class

Question

Hello,

Most examples I can find showing how to work with attributes show how to set them and not how to retrieve them. In my case, I am trying to get the class of an and then parse it to determine its parent value.

HTML:

<select class='parent' name='parent' size='10'>
    <option value='1'>Category 1 -></option>
    <option value='2'>Category 2 -></option>
</select>

<select class='child' id='child' size='10'>
    <option class='sub_1' value='5'>Custom Subcategory 1.1</option>
    <option class='sub_1' value='3'>Subcategory 1.1</option>
    <option class='sub_2' value='4'>Subcategory 2.1</option>
</select>

For any given option from the child list, I need to look at the class attribute, parse the name looking for the number (“sub_[n]”) and then grab the value of the option in the parent list.

My code so far (childVal has a value of “5” in my test case):

var class = child.find("option[value=" + childVal + "]").attr("class");

The above class variable is coming back “undefined.” I know the .find is working because I can use it for other things. The problem is getting at the class name.

Once I get the class name, I can strip out the “sub_” to get at the id number.

Is there a better way to do this? Why is .attr(“class”) returning undefined?

Here's a Fiddle link http://jsfiddle.net/n6dZp/8/ to a broken example.

Thank you,

Rick

This is the full function I am working on. It's a cascading select list.

<script type="text/javascript">
    function cascadeSelect(parent, child, childVal) {
        var childOptions = child.find('option:not(.static)');
        child.data('options', childOptions);

        parent.change(function () {
            childOptions.remove();
            child
                    .append(child.data('options').filter('.sub_' + this.value))
                    .change();
        })

        childOptions.not('.static, .sub_' + parent.val()).remove();

        if (childVal != '') {
            var className = child.find("option[value=" + childVal + "]").attr("class"); 

            ** need code here to select the parent and the child options based
            on childVal **
        }
    }

    $(function () {
        $('.categoryform').find('.child').change(function () {
            if ($(this).val() != null) {
                $('.categoryform').find('#CategoryId').val($(this).val());
            }
        });
    });

    $(function () {
        cascadeForm = $('.categoryform');
        parentSelect = cascadeForm.find('.parent');
        childSelect = cascadeForm.find('.child');

        cascadeSelect(parentSelect, childSelect, "5");
    });
</script>

Answer 1

To obtain the class attribute:

var classAttribute =  $('#child').find('option[value="' + childVal + '"]:first').attr('class');

To obtain the 'n' value you can parse the class attribute with a RegEx:

var nValue = /\bsub_([\S]*)\b/.exec( classAttribute )[1];

Hope it helps you.

Answer 2

class is a reserved word in Javascript, so you can't have a variable with that name. Try

var className = child.find("option[value=" + childVal + "]").attr("class");

Answer 3

For a start you are missing the $

You need:

var class = $(".child").find("option[value=" + childVal + "]").attr("class");

Answer 4

Don't use class as a variable name. Kills IE.

This will work but what is child variable equal to?

Answer 5

My apologies, I didn't read your question very carefully at first. Here's my take on what you should do:

var parentVal = $('.child option[value=' + childVal + ']').attr('class').substr(4);

OLD ANSWER

This should do the trick for you:

$(function() {
    $('#child').change(function() {  $('.parent').val($(this).children(':selected').attr('class').substr(4));
    });
});

Here's a live demo: http://jsfiddle.net/n6dZp/