jquery - 通过 "title begins with"将点击处理程序添加到元素的父级

Question

我想添加一个处理程序，当 title 开头的元素的曾祖 parent 时，该处理程序将更改具有 controlButtonInline 类的某些元素的背景单击名称。

到目前为止，我已经有了这个，但该事件从未运行。我不认为 ABC 填充了第二个 jQuery 可以识别的 id。

var ABC = $('select[title^="Name"]')

$(ABC).parent().parent().parent().click(function() {
  $('.controlButtonInline').css({
    'background': 'black'
  });
});

非常感谢您的帮助!

------编辑1------

我仍然无法让它工作，如果有人不介意的话，这里有更多信息。我想通过单击顶部 DIV 来执行单击处理程序(我编写了 id="unstableID"因为在我使用的程序中该 ID 会不断更改)，但我需要从标题中识别此元素后代 DIV。

var ABC = $('select[title^="Name"]')

ABC.parent().parent().parent().click(function() {
  $('.controlButtonInline').css({
    'background': 'black'
  });
});

controlButtonInline {
  width: 10px;
  height: 10px;
  background: red
}

<DIV id="unstableID">
  <DIV>
    <DIV>
      <DIV title="Name is BI">
      </DIV>
    </DIV>
  </DIV>
</DIV>

<DIV class="controlButtonInline">Text
</DIV>

Answer 1

问题是因为具有 title 属性的元素是 div，而不是 select。修复 jQuery 选择器并且代码可以工作。

话虽如此，最好使用 addClass() 而不是 css()，因为它不会将 CSS 逻辑放入 JS 文件中。另请注意，您应尽可能避免使用链式 parent() 调用。 closest() 是更好的做法:

var $ABC = $('div[title^="Name"]')

$ABC.closest('.great-grandparent').click(function() {
  $('.controlButtonInline').addClass('foo');
});

.controlButtonInline {
  width: 10px;
  height: 10px;
  background-color: red
}

.controlButtonInline.foo {
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="unstableID" class="great-grandparent">
  <div>
    <div>
      <div title="Name is BI">Click me</div>
    </div>
  </div>
</div>
<div class="controlButtonInline">Text</div>