通过 "title begins with" 将点击处理程序添加到元素的 parent

Question

我想添加一个处理程序，当 great-grandparent 为 title 的元素的 great-grandparent以 Name 开头被点击。

到目前为止我有这个但是事件从未运行过。我不认为 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

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

ABC.closest('.great-grandparent').click(function(){
  $('.controlButtonInline').css({
        'background': 'black'
    });
});

或

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

ABC.parents('.great-grandparent').click(function(){
      $('.controlButtonInline').css({
            'background': 'black'
        });
});

Answer 2

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

也就是说，最好使用 addClass() 而不是 css()，因为它不会在您的 JS 文件中放置 CSS 逻辑。另请注意，您应尽可能避免使用链式 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>

通过 "title begins with" 将点击处理程序添加到元素的 parent

Add click handler to parent of element by "title begins with"

jquery

parent

title