accessing a href element inside li ul

Question

I have my DOM elements as below

i want to access 3rd "a href" element inside "ul class='dropdown-menu dropdown-caret'" and change it's class "colorpick-btn" to "colorpick-btn selected" and set the class of first "a href" element to "colorpick-btn".

I was only able to come up with below but i can not get it working

<script>
        $(document).ready(function () {

            $("#dropdown-menu dropdown-caret li a").removeClass('colorpick-btn').addClass('colorpick-btn selected');

        });
    </script>

Answer 1

Use li:nth-child(3) a for the first one, and :first-child for the second.

jsFiddle example - it appears to do what you are asking.

$(".dropdown-menu.dropdown-caret li:nth-child(3) a").addClass('selected');
$(".dropdown-menu.dropdown-caret li:first-child a").removeClass('selected');

Aside from that, use .dropdown-menu.dropdown-caret as opposed to #dropdown-menu dropdown-caret ..

Answer 2

var $ul = $('.dropdown-colorpicker .dropdown-caret');
$ul.find('.colorpick-btn.selected').removeClass('selected');
$ul.find('.colorpick-btn').eq(2).addClass('selected');

Answer 3

In your markup, you don't have any elements with id dropdown-menu. Also, dropdown-menu and dropdown-caret are referencing the same element and should not be separated by a space. This should get you started:

$(document).ready(function (){
    $(".dropdown-menu.dropdown-caret li:eq(2) a").removeClass('colorpick-btn').addClass('colorpick-btn selected');
});

Answer 4

you can simply use nth-child for this. no need to remove existing class, after selecting element you want, you can add new class like bellow

<script>
    $(document).ready(function () {

        $("#dropdown-menu dropdown-caret li:nth-child(3) a").addClass('selected');

    });
</script>