2013-11-15 2 views
0

У меня есть свои DOM элементы, как показано нижедоступ к HREF элемента внутри Li ул

enter image description here

я хочу, чтобы получить доступ к третьему «A HREF» элемент внутри «уль класс = 'выпадающий-меню ниспадающего-каре» и измените его класс «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> 
+0

нет элемента с идентификатором 'выпадающего-menu' –

+0

как бы вы знаете, что вы хотите изменить 3rd' li a' element –

+0

Почему вы удаляете класс 'colorpick-btn' и добавляете тот же класс снова в одно и то же время? –

ответ

1

Использование li:nth-child(3) a для первого и :first-child для второго.

jsFiddle example - похоже, он делает то, что вы просите.

$(".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 ..

+0

Вы/Плакат забыл период в селекторе. – TreeTree

+0

@TreeTree Спасибо - его сложно сказать с экрана. Я просто копировал/вставлял, а затем модифицировал код, который использовал OP ... должен работать сейчас. –

+0

благодарит за ответ! по какой-то причине он все еще не работает. Я использую стороннюю тему в своем приложении. Так что я просто хотел изменить некоторые цветовые схемы без изменения стилей по умолчанию. https://wrapbootstrap.com/theme/ace-responsive-admin-template-WB0B30DGR. – chamara

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

В разметке, у вас нет каких-либо элементов с выпадающим меню ид. Кроме того, выпадающее меню и dropdown-caret ссылаются на один и тот же элемент и не должны разделяться пробелом. Это поможет вам начать:

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

вы можете просто использовать п-го ребенка для этого. нет необходимости удалить существующий класс, после выбора элемента вы хотите, вы можете добавить новый класс, как сильфон

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

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

    }); 
</script> 
Смежные вопросы