find div within parent div by parent div class in jquery

Question

I have a situation with two divs, one parent div which has proper classes and another div inside the parent div which doesn't have any class but on a jquery event from the parent div I want to assign a class to the inner div. This is how the structure looks:

<div class="noUi-handle noUi-handle-lower">
    <div class="">
        <span></span>
    </div>
</div>

Any advice how to get to the inner div and assign a class by calling the parent div with jquery?

Answer 1

Yes, you can use attr-elem selector like

$('.noUi-handle.noUi-handle-lower > div[class=""]').addClass('whatever');

Demo

If you don't want to add class with jQuery and simply want to target those elements than only CSS would suffice as well..

.noUi-handle.noUi-handle-lower > div[class=""] {
    /* Targets those div elements which has empty class attribute */
}

Explanation : The selector selects all the div elements with empty class attribute which are direct child to element having both the classes ie .noUi-handle and .noUi-handle-lower

Answer 2

Try .find . In conjunction with $(this) it will only look for child elements on that event.

function pizzaToppings() {
   $(this).find('div').addClass('mushrooms');
}

$('.noUi-handle').on('click', pizzaToppings);

FIDDLE