javascript - jQuery 找不到现有元素

Question

我遇到以下问题，我的网站上有一个下拉菜单。但因为我想为其添加样式，所以我隐藏了它并在其上显示了一个 bootsrap 下拉菜单。
这是我的 html 结构:

<div class="input-box">
    <select name="super_attribute[139]" id="attribute139" class="required-entry super-attribute-  select selectpicker" style="display: none;">
        <option value="">Maat_dames</option>
        <option value="44" price="0">s</option>
        <option value="43" price="0">m</option>
        <option value="42" price="0">l</option>
        <option value="41" price="0">xl</option>
        <option value="40" price="0">2xl</option>
        <option value="39" price="0">3xl</option>
        <option value="38" price="0">4xl</option>
    </select>
   <!-- The normal dropdown -->

   <!-- The bootstrap dropdown -->
   <div class="btn-group bootstrap-select required-entry super-attribute-select">
       <button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="attribute139" title="Maat_dames">
           <span class="filter-option pull-left">Maat_dames</span>
           <span class="caret"></span>
       </button>
       <div class="dropdown-menu open">
           <ul class="dropdown-menu inner selectpicker" role="menu">
               <li data-original-index="0" class="selected">
                    <a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Maat_dames</span>">
                         <span class="text">Maat_dames</span>
                         <span class="glyphicon glyphicon-ok check-mark"></span>
                    </a>
                </li>
           </ul>
      </div>
  </div>

我正在尝试将文本 Maat_dames 更改为简单的 Maat，我尝试了以下 jQuery 代码:

if(jQuery('span .filter-option').length == 0){console.log("fail")}
if(jQuery('span .filter-option.pull-left').length == 0){console.log("fail")}
if(jQuery('span .filter-option .pull-left').length == 0){console.log("fail")}

当我检查控制台日志时，在所有三种情况下都返回失败，因此找不到该元素。为什么会这样？

编辑

所有答案都建议删除 span 和 .filter-option 之间的空格，虽然它在我的网站上不起作用，但当我尝试运行时它确实起作用当我尝试在 JSFiddle 中重新创建它时，注释中的代码片段。

是否是因为该元素是由插件动态创建的，所以 jQuery 无法找到该元素？

Answer 1

您正在使用 descendant combinator (一个空格)。

span .filter-option 表示任何属于 filter-option 类成员且具有 祖先 的元素em>跨度。

文档中属于该类的唯一元素是 Span 本身，并且没有也是 Spas 的祖先。

删除选择器中的空格。

if(jQuery('span.filter-option').length == 0){console.log("fail")}else{console.log('success'); }
if(jQuery('span.filter-option.pull-left').length == 0){console.log("fail")}else{console.log('success'); }
if(jQuery('span.filter-option.pull-left').length == 0){console.log("fail")}else{console.log('success'); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input-box">
    <select name="super_attribute[139]" id="attribute139" class="required-entry super-attribute-  select selectpicker" style="display: none;">
        <option value="">Maat_dames</option>
        <option value="44" price="0">s</option>
        <option value="43" price="0">m</option>
        <option value="42" price="0">l</option>
        <option value="41" price="0">xl</option>
        <option value="40" price="0">2xl</option>
        <option value="39" price="0">3xl</option>
        <option value="38" price="0">4xl</option>
    </select>
   <!-- The normal dropdown -->

   <!-- The bootstrap dropdown -->
   <div class="btn-group bootstrap-select required-entry super-attribute-select">
       <button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="attribute139" title="Maat_dames">
           <span class="filter-option pull-left">Maat_dames</span>
           <span class="caret"></span>
       </button>
       <div class="dropdown-menu open">
           <ul class="dropdown-menu inner selectpicker" role="menu">
               <li data-original-index="0" class="selected">
                    <a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Maat_dames</span>">
                         <span class="text">Maat_dames</span>
                         <span class="glyphicon glyphicon-ok check-mark"></span>
                    </a>
                </li>
           </ul>
      </div>
  </div>