i am making a tree with the help of js and jquery in asp mvc.

there is a add button which add the sibling and same level child .

to identify what is to be done i am using the following code.

    //to check from where the function is called
     var checkClass = $('#UlPrnt').find('span').css('background-color', 'Lime').length;
        if (checkClass == 0) {
            AddSiblings();
        $('#hdnChkSibbling').val('2');
        }
        else {
            debugger         
            var getValue = $('#dvTree').find('span').css('background-color', 'Lime');
            var spnID = getValue[1].id;
            var check = spnID.indexOf("spn");
            if (check>0) {
                AddSiblings();
                $('#'+spnID).css('background-color', '');
            }
            else {
                //call the function to append the same level child
            }

        }

when i was going through the find function in jquery what i interpreted is that it will return the no of dom where the corresponding bg color is lime.

but what it does it applys the bgcolor to all the span .

how to get the ids of the span whose bgcolor is lime.

every thing is created dynamically (span ,div) just wanted to add for getting a better picture.

i am making a tree with the help of js and jquery in asp mvc.

there is a add button which add the sibling and same level child .

to identify what is to be done i am using the following code.

    //to check from where the function is called
     var checkClass = $('#UlPrnt').find('span').css('background-color', 'Lime').length;
        if (checkClass == 0) {
            AddSiblings();
        $('#hdnChkSibbling').val('2');
        }
        else {
            debugger         
            var getValue = $('#dvTree').find('span').css('background-color', 'Lime');
            var spnID = getValue[1].id;
            var check = spnID.indexOf("spn");
            if (check>0) {
                AddSiblings();
                $('#'+spnID).css('background-color', '');
            }
            else {
                //call the function to append the same level child
            }

        }

when i was going through the find function in jquery what i interpreted is that it will return the no of dom where the corresponding bg color is lime.

but what it does it applys the bgcolor to all the span .

how to get the ids of the span whose bgcolor is lime.

every thing is created dynamically (span ,div) just wanted to add for getting a better picture.

• javascript
• jquery
• asp-mvc
• jquery-selectors

3 Answers 3

You're using the jQuery .css() method incorrectly. You use .css() to get or to set a css property. For more details see: http://api.jquery./css/.

Instead of using css, you should add a class to all elements that you want to be lime-colored:

$('???').addClass('lime-colored');

Then, in your css file, specify the styling for the lime-colored class:

.lime-colored { background-color:lime; }

Then, when you want to grab all of the elements that are currently green, do so by grabbing the elements that have the lime-colored class appended:

var checkClass = $('#UlPrnt').find('span.lime-colored').length;

If you want to remove lime coloring, you can use the following:

$('???').removeClass('lime-colored');

You have to loop through each then find the attribute lime. Here is an example: jQuery: Can you select by CSS rule, not class?

Another approach though would be to add a class (like background-lime) when you change the background to lime. Then just search for that class, $.(".background-lime").

var ids = $('#UlPrnt span')
 //a set of spans with background-color of lime
 .filter(function(){
  return $(this).css('background-color')=='lime';
 })
 //a set of ids
 .map(function(){ return this.id; });