Добавить обработчик щелчков к родительскому элементу с помощью "title начинается с"

#jquery #parent #title

#jquery #родительский #Название

Вопрос:

Я хочу добавить обработчик, который изменит фон некоторых элементов с классом controlButtonInline при щелчке на прародителе элемента с title , который начинается с Name .

Пока у меня есть это, но событие никогда не запускается. Я не думаю, что ABC это заполняется идентификатором, который может распознать второй jQuery.

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

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

Любая помощь с благодарностью принята!

——ПРАВКА 1——

Я все еще не могу заставить это работать, вот дополнительная информация, если кто-нибудь не против посмотреть. Я хочу активировать обработчик кликов, щелкнув по верхнему DIV (я написал id =»unstableID», потому что в программе, которую я использую, этот идентификатор будет постоянно меняться), но мне нужно идентифицировать этот элемент по названию дочернего 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>

1. Ваш код кажется нормальным, хотя вы дважды оборачиваете свой ABC объект jQuery, и связанные parent() вызовы должны быть заменены на closest() . Если у вас это не работает, пожалуйста, отредактируйте вопрос, включив образец вашего HTML, чтобы мы могли увидеть пример проблемы

2. Разве это не должно быть два parent() вызова?

3. Я хочу, чтобы на три поколения выше элемента с таким названием, поэтому .parent().parent().parent() — единственное решение, о котором я мог подумать

4. Большое спасибо за отзыв. Я добавил еще несколько строк кода, которые должны объяснить проблему.

5. Спасибо за добавление HTML. Проблема в том, что элемент с title атрибутом является div , а не a select . Исправьте это, и код заработает.

Ответ №1:

Проблема в том, что элемент с title атрибутом является div , а не a select . Исправьте селектор jQuery, и код заработает.

При этом лучше использовать addClass() over 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>

Ответ №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'
        });
});