jQuery多属性选择器find()不工作

Question

jQuery Version 1.11.1

Bootstrap Version 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所述，过滤器可能是您正在寻找的，以便仅选择具有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");
});