методы поиска элементов

Стоит следующая задача: есть следующая структура

<div class="myBlock">
    <div class="myBlock__elem">
        <div>
            <a class="myBlock__link" href=""></a>
        </div>
        <div>
            <input class="myBlock__text" type="text" disabled>
        </div>
    </div>
    <div class="myBlock__elem">
        <div>
            <a class="myBlock__link" href=""></a>
        </div>
        <div>
            <input class="myBlock__text" type="text" disabled>
        </div>
    </div>
    <div class="myBlock__elem">
        <div>
            <a class="myBlock__link" href=""></a>
        </div>
        <div>
            <input class="myBlock__text" type="text" disabled>
        </div>
    </div>
</div>

Деллегированно вешаю обработчик клика для myBlock__link.

{
  live: function () {
    this.liveBindTo('link', 'click', function () {
      this._onLinkClick();
    });
    return false;
  }
}

в обработчике _onLinkClick мне нужно найти элемент myBlocktext, находящийся в одном и том же элементе myBlockelem, с ссылкой myBlocklink, по которой кликнули. Я думал делать это так: в обработчик _onLinkClick передается объект события, содержащий свойство e.currentTarget, в котором содержится ссылка, по которой кликнули. Используя ее я хочу найти родительский для этой ссылки элемент myBlockelem, затем в этом myBlockelem найти myBlocktext. Но методов для такого поиска в i-bem, судя по всему, нету. Есть обычные методы поиска элементов findElem и elem, но они ищут все подряд элементы, внутри блока, а мне нужно, чтобы они нашли элементы, содержащие внутри себя элемент из e.currentTarget. Как это делается, подскажите, пожалуйста.

10 years ago

qfox

https://ru.bem.info/articles/bem-js-main-terms/#Элементы-4 В findElem можно передать контекст для «находящийся в одном и том же элементе myBlock__elem», т.е.:

this.elem('elem').forEach(function (elem) {
  this.findElem(elem, 'text') ← text
}, this);

Я бы таким образом сохранил все наборы элемент-ссылка-текст и их дом ноды при инициализации, и дальше использовал в _onLinkClick для поиска.

10 years ago

pavel06081991

В общем и целом, как я понимаю, для таких задач уже нужно использовать jQuery-ие методы для поиска, типо filter и т.п.?

10 years ago

qfox

@pavel06081991 Нуу, в общем случае должно хватать функционала поиска и методов jquery-chain, которые приходят из *elem, ибо изменять дом руками не рекомендуется. Т.е. this.elem('asd').filter... — это ок, а this.elem('asd').append... — не ок ;)

10 years ago

belozer

А как найти элемент-родитель для элемента?

т.е. есть

item
--title
item
--title

при клике на title нужно производить манипуляции с item

а точнее даже так

item
--title
----link
item
--title
----link

при клике на link нужно производить манипуляции с item

10 years ago

tadatuta

@belozyorcev

this.bindTo(this.elem('link'), 'click', function(e) {
    e.target.closest(this.buildSelector('item')); // указывает на нужный item
});

10 years ago

belozer

т.е. для i-bem будет так?

this.bindTo(this.elem('link'), 'click', function(e) {
    var el = $(e.target.closest(this.buildSelector('item'))); // указывает на нужный item
    this.setMode(el, 'active', true);
});

правильно ли я полагаю?

10 years ago

tadatuta

@belozyorcev да

Чтобы оставлять комментарии, необходимо авторизоваться.