У меня есть элементы DOM, как показано ниже.
Я хочу получить третий элемент "a href" внутри "ul class= 'dropdown-menu dropdown-caret" и изменить его класс "colorpick-btn" на "colorpick-btn selected" и установить класс первого "a href", элемент "colorpick-btn".
Я мог только придумать ниже, но я не могу заставить его работать
<script>
$(document).ready(function () {
$("#dropdown-menu dropdown-caret li a").removeClass('colorpick-btn').addClass('colorpick-btn selected');
});
</script>
var $ul = $('.dropdown-colorpicker .dropdown-caret');
$ul.find('.colorpick-btn.selected').removeClass('selected');
$ul.find('.colorpick-btn').eq(2).addClass('selected');
Используйте li:nth-child(3) a
для первого и :first-child
для второго.
Пример jsFiddle - он, похоже, делает то, что вы просите.
$(".dropdown-menu.dropdown-caret li:nth-child(3) a").addClass('selected');
$(".dropdown-menu.dropdown-caret li:first-child a").removeClass('selected');
Помимо этого, используйте .dropdown-menu.dropdown-caret
а не #dropdown-menu dropdown-caret
..
вы можете просто использовать nth-child для этого. нет необходимости удалять существующий класс, после выбора элемента, который вы хотите, вы можете добавить новый класс, например, ниже
<script>
$(document).ready(function () {
$("#dropdown-menu dropdown-caret li:nth-child(3) a").addClass('selected');
});
</script>
В вашей разметке у вас нет элементов с раскрывающимся меню id. Кроме того, выпадающее меню и dropdown-caret ссылаются на один и тот же элемент и не должны разделяться пробелом. Это должно помочь вам начать:
$(document).ready(function (){
$(".dropdown-menu.dropdown-caret li:eq(2) a").removeClass('colorpick-btn').addClass('colorpick-btn selected');
});
dropdown-menu
li a