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

【问题标题】：How do I use jQuery to hide an element with no class or ID... when the parent has no id either?如何使用 jQuery 隐藏没有类或 ID 的元素...当父级也没有 id 时？
【发布时间】：2014-05-15 07:36:10
【问题描述】：

我想使用 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 >

我的尝试

由于我的事件没有触发，我认为我的选择器是错误的。完成“检查元素”后，我打开了 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，但没有看到我要找的东西（除非我错过了）

我们将不胜感激获得正确选择器的任何帮助。

【问题讨论】：

我想你只需要看看官方文档，api.jquery.com。选择器的工作方式与 CSS 类似，此外还有一些特殊的选择器已记录在案，例如 :input
另请注意，您的输入类型为search 而不是text。
改成$("#defaultHomeContent div:nth-child(2)")
为什么不为元素设置一个 ID 或类以使其变得简单？
@RanjithKumarGovarthanan - 这是第三方控件。我做不到。

标签： javascript jquery css jquery-selectors kendo-ui

【解决方案1】：

在您链接的页面中，它是defaultHomecontent 下的第二个div，所以

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

【讨论】：

我明白你在说什么......我应该把它包装在一个命名元素中，然后按照你说的做。（搜索框实际上并不是 defaultHomeContent 的子项；它是同一级别的对等项。）
我无法让它工作。由于这是第 3 方控件，我无法将类或 ID 添加到搜索框的父级。
抱歉，我以为您想获得第二个 div...对于搜索框，您可以按照 @Serendipity 的建议使用 $("input[type='search']")

【解决方案2】：

您实际上想隐藏带有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

【讨论】：

谢谢，这确实回答了我的问题。我的简单需求是在框中输入数据时触发输入/更改事件。当我写这篇评论时，我想我知道如何才能完成这项工作......很快就会测试......
查看其他问题的答案：stackoverflow.com/a/23494360/2001735

【解决方案3】：

您可以使用查找功能。假设您在页脚 div 中有这样的输入字段。

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

您可以像这样使用选择器 $("#footer input").hide() 或 $("#footer").find("input").hide() 或 $('input[name=text] ', '#footer').hide();

【讨论】：

Paul Irish 认为 find() 比将它们包含在同一个选择器中性能略高一些。大约 33:30 分。 paulirish.com/2010/10-things-i-learned-from-the-jquery-source
我无法让它工作。可能是因为没有 ID 或类作为我可以使用的父级，或者我添加的类不是输入元素的直接父级。由于这是第 3 方控件，我无法直接向元素添加父级。
直接父级是否应该分配任何类或 id 真的没关系.. find 函数可以迭代父级的所有子级。

【解决方案4】：

根据您添加的内容。

你可以使用

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

作为选择器。

看看是否有帮助。这是example

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

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

【讨论】：

谢谢，type=prefix很有用
对不起，什么没用？小提琴上的示例确实选择了“搜索”输入类型。此选择器对空间敏感...例如“input [type='search'” 将不起作用。