jquery mobile：显示多个数据过滤器答案

【问题标题】：jquery mobile: multiple data-filters showingjquery mobile：显示多个数据过滤器
【发布时间】：2012-03-13 17:13:18
【问题描述】：

我正在尝试在 jquery-mobile 中创建一个列表视图控件，该控件能够让某些列表项展开并显示子项。我的目标是这个列表是可过滤的，并且 jquery-mobile data-filter="true" 属性就足够了。不幸的是，它似乎被内部的和元素继承，我最终得到了多个过滤器控件。在 jquery 中是否有防止这种类型继承的最佳实践？使用 jquery 删除无关的表单标签是一种可行的技巧，但我宁愿按设计进行。

这是一个简单的例子：

<div data-role="content">
  <div class="choice_list">
    <h2>Select an item</h2><br />
    <ul data-role="listview" data-inset="true" data-filter="true">
      <li><a>Item</a></li>
      <li data-role="collapsible">
        <h3>Super Item</h3>
        <ul data-role="listview" data-inset="true">
          <li><a>Sub Item</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

请查看此 JSFiddle 示例：http://jsfiddle.net/harlomic/SsJjS/3/。

【问题讨论】：

标签： javascript jquery html jquery-mobile

【解决方案1】：

您可以使用 CSS 隐藏三个过滤器输入中的两个：

/*hide all of the search filter forms*/
#test .choice_list form.ui-listview-filter {
    display : none;
}

/*show just the first search filter form*/
#test .choice_list form.ui-listview-filter:nth-child(-n+3) {
    display : block;
}

这是一个演示：http://jsfiddle.net/SsJjS/5/

请注意，test 是找到列表视图的页面的 ID，choice_list 是列表视图的容器元素的类。

【讨论】：

感谢 Jasper 的回答，很高兴知道如何使用 css 隐藏过滤器。我仍在寻找防止过滤器添加到 DOM 的最佳做法。
我相信你偶然发现了一个错误。我从来没有使用过这样的嵌套列表，但是 jQuery Mobile 在应用数据过滤器时似乎不理解嵌套列表视图和非嵌套列表视图之间的区别。

【解决方案2】：

我在 JQM 中的嵌套列表也遇到了同样的问题。

我搞砸了，如果您从额外的

JQM 应该解决这个问题，因为我也觉得这可能是一个错误，因为我在文档中没有找到任何关于此的内容。

【讨论】：

感谢您的回复，cshu。这与我的经历基本相同。