jquery find element and add class to element

Question

Trying to add a class to an element inside an li item when a function call is made. I can get the correct value outputted, however finding the child <i> is proving difficult. If I could find the correct nested <i> and add the class 'show' that would solve it :)

JS code:

filterMarkers = function(category) {
    for (i = 0; i < markers1.length; i++) {
        marker = gmarkers1[i];
        // If is same category or category not picked
        if (marker.category == category || category.length === 0) {
            marker.setVisible(true);
            // Show the tick icon
            $(".filter").find("[data-value='" + category + "']").addClass('show');

        }
        // Categories don't match
        else {
            marker.setVisible(false);
        }
    }
}

HTML code:

<ul class="drop-down">
    <li class="filter blue" data-value="" onclick="filterMarkers('');">All <i class="fi-check"></i></li>
    <li class="filter yellow" data-value="test-one" onclick="filterMarkers('test-one');">Sales <i class="fi-check"></i></li>
    <li class="filter red" data-value="test-two" onclick="filterMarkers('test-two');">Incentives <i class="fi-check"></i></li>
    <li class="filter grey" data-value="test-three" onclick="filterMarkers('test-three');">Conferences <i class="fi-check"></i></li>
    <li class="filter orange" data-value="test-four" onclick="filterMarkers('test-four');">Team building <i class="fi-check"></i></li>
</ul>

$(".filter[data-value='" + category + "']").addClass('show'); use this no need to use find since the class filter has the data attr — guradio
– guradio, Commented May 20, 2016 at 10:34

gurvinder372 · Accepted Answer · 2016-05-20 10:54:35Z

1

Looking at the filterMarkers method, you

Either want to simply show the category which is passed as argument and hide everything else
Or if no argument is passed then hide everything.

Simplify your code to

filterMarkers = function(category) {
    $(".filter").removeClass("show"); //remove show class from all
    if( category.length > 0 )
    {
       $(".filter[data-value='" + category + "']").addClass('show');
    }
    for (i = 0; i < markers1.length; i++) 
    {
        marker = gmarkers1[i];
        marker.category == category || category.length === 0 ? marker.setVisible( true ) : marker.setVisible( false );
        }
    }
}

edited May 20, 2016 at 10:54

answered May 20, 2016 at 10:40

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Warve Over a year ago

I only wish to add the class of show to the li item where the data-value matches the category :)

gurvinder372 Over a year ago

@JesseC and not hide the others? Please confirm. In that case, simply remove the first line in the method.

Warve Over a year ago

Yes, when selected add class 'show', remove from all others. The code you suggested isn't adding the class though, the find maybe the issue.

Warve Over a year ago

Thanks @gurvinder372 - it's working, marked as correct :)

Hazonko · Accepted Answer · 2016-05-20 10:34:35Z

0

$(".filter[data-value='" + category + "']").addClass('show');

answered May 20, 2016 at 10:34

Hazonko

1,0351 gold badge15 silver badges30 bronze badges

Collectives™ on Stack Overflow

jquery find element and add class to element

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related