通过“title starts with”将click处理程序添加到元素的父级

Question

我想添加一个处理程序，当点击一个以controlButtonInline开头的title元素的曾祖父母时，它将使用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

问题是因为具有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>

Answer 2

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'
        });
});