如何使用jQuery隐藏没有类或ID的元素…当父节点也没有id时

How do I use jQuery to hide an element with no class or ID... when the parent has no id either?

本文关键字：父节点 元素 id ID jQuery 何使用 隐藏      更新时间：2023-09-26

我想使用jQuery来处理给定搜索框中的事件。我的问题是

  1. 我不知道如何正确地构建选择器，使JQuery接受它。
  2. 我想我弄糊涂了，因为我需要列表中的第二个元素，并且需要选择它。

运行时的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 >

What I've try

因为我的事件没有触发，我假设我的选择器是错误的。我打开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文档，但没有看到我要找的东西(除非我错过了它)

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

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

$("#defaultHomeContent div:nth-child(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

可以使用find函数。假设您在页脚div中有这样的输入字段:

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

您可以使用选择器这样的美元("#页脚输入")hide()或$(" #页脚");("输入")hide()或$("输入[name =文本]","#页脚")hide ();

根据您添加的内容。

你可以用

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

作为选择器。

看看是否有帮助。下面是一个例子

你也可以这样组合选择器:

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