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 类成员的任何元素，并且祖先是 span

文档中该类成员的唯一元素是跨越自身，并且没有也是跨度的祖先。

从选择器中删除空格。

＆＃13;

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'); }

＆＃13;

<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>

＆＃13;

Answer 2

将jQuery('span .filter-option')替换为jQuery('span.filter-option')。

目前，jQuery('span .filter-option')在DOM中的 span 标记内找到了 filter-oprion 类的元素。

当您撰写jQuery('span.filter-option')时，它会在DOM中找到 span 元素，其中包含 filter-option 类。

Answer 3

('span.filter-option').length也许？

jQuery没有找到现有的元素

3 个答案: