Question

如果我有以下html结构

<select id="StatusMultiselect" class="multiselect form-control" name="Status" multiple="multiple" style="display: none;"> </select>
   <div class="btn-group" style="width: 100%;">
       <button class="multiselect dropdown-toggle btn btn-default">
        ...
    </div>

我正在尝试使用类似这样的jquery将类添加到知道StatusMultiselect选择器的按钮元素

 $('#StatusMultiselect').next().find('.multiselect .dropdown-toggle .btn .btn-default').addClass('gray');

但这不起作用。

我错在哪里？

Answer 1

选择器中的空格用于查找元素，即descendant selector，它将搜索b中具有类a的元素内具有类.a .b的元素。 / p>

.find('.multiselect.dropdown-toggle.btn.btn-default') // Remove spaces in the selector
    .addClass('gray');

如果选择器中的类中没有使用空格，则选择具有所有类的元素。

$('#StatusMultiselect').next().find('.multiselect.dropdown-toggle.btn.btn-default').addClass('gray');

.gray {
  color: gray;
  font-weight: bold;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="StatusMultiselect" class="multiselect form-control" name="Status" multiple="multiple" style="display: none;"></select>
<div class="btn-group" style="width: 100%;">
  <button class="multiselect dropdown-toggle btn btn-default">Button</button>
</div>

Answer 2

删除类名之间的空格。否则它将搜索子元素。

$('#StatusMultiselect').next().find('.multiselect.dropdown-toggle.btn.btn-default').addClass('gray')

jquery next并找到添加css类

2 个答案: