Question

jQuery版本1.11.1

Bootstrap 3.1.1版

HTML

<i class="fa fa-question-circle" data-toggle="tooltip" data-title="hover focus"></i>
<i class="fa fa-question-circle" data-toggle="tooltip" data-title="hover focus"></i>
<i class="fa fa-question-circle" data-toggle="tooltip" data-trigger="click" data-title="click"></i>
<i class="fa fa-question-circle" data-toggle="tooltip" data-trigger="click" data-title="click"></i>

JS

$("[data-toggle='tooltip']").tooltip()
  .find("[data-trigger='click']")
  .on("click", function(e) {
    $("[data-toggle='tooltip'][data-trigger='click']").not(this).tooltip("hide");
  });

// true
// $("[data-toggle='tooltip'][data-trigger='click']").length === 2
// false
// $("[data-toggle='tooltip']").tooltip().find("[data-trigger='click']").length === 2

我知道可以使用

$("[data-toggle='tooltip']").tooltip();
$("[data-toggle='tooltip'][data-trigger='click']").on("click", function(e) {
  $("[data-toggle='tooltip'][data-trigger='click']").not(this).tooltip("hide");
});

为什么第一个代码不能使用find（）？

Answer 1

find搜索所选对象的后代，而不是所选对象本身。无论如何，你的选择器正在获取所有元素。

正如@adeneo所说，filter可能就是您要找的，只是选择具有data-trigger="click"属性的元素

即

$("[data-toggle='tooltip']").tooltip()
  .filter("[data-trigger='click']")
  .on("click", function(e) {
   ....

Answer 2

.filter()是你不需要的.find（）
它将当前选定的元素减少为与选择器匹配的元素

$("[data-toggle='tooltip']").tooltip()
  .filter("[data-trigger='click']")
  .on("click", function(e) {
    $("[data-toggle='tooltip'][data-trigger='click']").not(this).tooltip("hide");
});

jQuery多个属性选择器，find（）不起作用

2 个答案: