jQuery 选择器。新手帮助答案

【问题标题】：jQuery selecrors. help for newbiejQuery 选择器。新手帮助
【发布时间】：2010-04-28 13:47:59
【问题描述】：

我有这段代码，它打开新的 jquery-ui 对话框，然后隐藏对话框的标题栏。

 <div id="keyboard" class="keyboard dialogs">...</div>

  $("#keyboard").dialog({
      width: 1136,
      height: 437,
      position: ['center',400],
      closeOnEscape: false,
      autoOpen: false,
      resizable: false,
      open: function(event, ui)  {
          $(".ui-dialog-titlebar").hide(); // <-- this selector i want to change
      }
  });

但是 $(".ui-dialog-titlebar") 选择所有标题栏。如何更改选择器以仅隐藏此标题栏？

【问题讨论】：

标签： jquery jquery-ui jquery-selectors

【解决方案1】：

要获得标题栏，您可以这样做：

$(this).prev('.ui-dialog-titlebar').hide();

对话框在 html 中大致如下所示：

<div class="ui-dialog">
  <div class="ui-dialog-titlebar"></div>
  <div id="keyboard" class="ui-dialog-content">  <!-- "this" element -->
    Your stuff
  </div>
</div>

当然还有更多的类等等，但基本上你需要返回一个元素，this 的前一个兄弟是你要隐藏的标题栏。

【讨论】：

谢谢。这正是我想要的

【解决方案2】：

给标题栏你试图隐藏一个 id 或一些你可以测试的可区分特征。

【讨论】：

我不能（不知道如何）向这个元素添加 id，因为它的创建是由 jquery-ui 库处理的。

【解决方案3】：

取决于标题栏相对于键盘 div 的位置，您必须使用以下方式遍历 dom 才能到达它：

$("this").parents(".ui-dialog-titlebar").hide();

【讨论】：

您能否发布相关的 html 标记，以便我们可以看到 .ui-dialog-titlebar 与此#keyboard 元素相关的位置

【解决方案4】：

我注意到打开处理程序中的ui 参数。这是对刚刚打开的对话框的引用吗？如果是，它会很简单：

ul.find('.ui-dialog-titlebar').hide();

【讨论】：

"ui" 在这种情况下是一个空对象。