Question

我想使用jQuery来处理事件in a given search box。我的问题是

我不知道如何正确构建选择器，以便JQuery接受它。
我觉得我很困惑，因为我需要列表中的第二个元素，需要选择那个。

运行时HTML如下所示:(改编自Chrome开发者工具，仅显示相关的类和ID。没有要显示的ID。）

<body class=km-ios7 km-7 km-m0 km-web km-black-status-bar km-vertical km-widget km-pane>
   <div class="km-widget km-view">

       <!-- Begin 3rd party control -->
       <div class=class="km-widget km-view">
          <div km-header>
          <div class="km-content km-widget km-scroll-wrapper">
             <div class=km-scroll-header>
             <div class=km-scroll-container>
                <div class="km-listview-wrapper">
                    <form class="km-filter-form">
                       <div class="km-filter-wrap">
                          <input type=search >

我尝试了什么

由于我的事件没有解雇，我认为我的选择器是错误的。在我做完＆＃34;检查元素＆＃34;之后，我打开了chrome开发工具。工具的底部列出了用于该元素的所有父标记（没有类或ID）。作为测试，我尝试使用以下内容隐藏搜索框：

 $("div").hide();   // hides everything...
 $("div div").hide(); // hides the wrong element on the page
 $("input").hide();  // nothing
 $(":input").hide();  // nothing... saw this example somewhere, don't understand it
 $("input:text").hide();  // nothing... saw this example (http://stackoverflow.com/q/17384218/328397), don't understand it

我看了W3 document，但没看到我在找什么（除非我错过了）

获得正确选择器的任何帮助都将受到赞赏。

Answer 1

在您关联的页面中，defaultHomecontent下的第二个div，所以

$("#defaultHomeContent div:nth-child(2)")

Answer 2

你可以使用find功能。假设你在页脚div里面有输入字段。

<div id="footer">
   <div>
     <div>
       <input type="text" name="text" value="Search" />
     </div>
   </div>
</div>

你可以使用这样的选择器$（＆＃34; #footer input＆＃34;）。hide（）或$（＆＃34;＃footer＆＃34;）。find（＆＃34; input＆＃34; ）.hide（）或$（＆＃39;输入[name = text]＆＃39;，＆＃39;＃footer＆＃39;）。hide（）;

Answer 3

您确实希望隐藏带有km-filter-wrap类的div。

更安全的替代方法可能是不处理选择器，而是显示/隐藏ListViewFilter的searchInput元素的包装元素：

var listView = $("#local-filterable-listview").kendoMobileListView({
    ...
}).getKendoMobileListView();
listView._filter.searchInput.parent().hide();

或

listView.wrapper.find(".km-filter-wrap").hide();

通常，最好尽可能使用Kendo UI控件公开的元素，而不是手动构建查询（因为它们可能会在将来的版本中更改）。

您还可以使用自己的API方法扩展ListView小部件：

kendo.mobile.ui.ListView.fn.filterVisible = function(value) {
    var wrapper = this._filter.searchInput.parent();
    if (value) {
        wrapper.show();
    } else {
        wrapper.hide();
    }
};

然后你可以使用

listView.filterVisible(false); // hide the filter

Answer 4

根据您添加的内容。

您可以使用

$("input[type='search']")

作为选择器。

看看是否有帮助。这是example

您也可以这种方式组合选择器：

var $container = $("div.km-widget");
var $searchBox = $container.find("input[type='search']");

如何使用jQuery隐藏没有类或ID的元素...当父级没有id时？

4 个答案: