Какие аналоги в JS данных JQ выражений?

Question

[Андрей Брекоткин]

День добрый!

Подскажите какие аналоги данным выражениям из jQuery в javascript

$(this).parents('.portfolio')
$(this).parent('.portfolio')
$(this).children('.portfolio')
$(this).find('.portfolio')
$(this).next('.portfolio')

Что то сам туплю. Заранее спасибо!

Answer 1

[0xD34F]

youmightnotneedjquery.com

UPD.

$(this).parents('.portfolio')

function parents(el, selector) {
  const p = [];
  while ((el = el.parentNode) !== document && el) {
    (!selector || el.matches(selector)) && p.push(el);
  }
  return p;
}

parents(this, '.portfolio')

$(this).parent('.portfolio')

this.parentNode.classList.contains('portfolio') ? this.parentNode : null

$(this).children('.portfolio')

[...this.children].filter(n => n.classList.contains('portfolio'))

// или

Array.prototype.filter.call(this.children, n => n.matches('.portfolio'))

// или

this.querySelectorAll(':scope > .portfolio')

$(this).find('.portfolio')

this.querySelectorAll('.portfolio')

$(this).next('.portfolio')

(el => el && el.matches('.portfolio') ? el : null)(this.nextElementSibling)

Comments

[Андрей Брекоткин]

И что? Во первых это ответ на вопрос, во вторых по ссылке нет того, о чем я спрашиваю

[Павел Антонов]

Андрей Брекоткин, по ссылке в поиске вбивается метод, который нужно заменить на js обычный

$(el).parent() = el.parentNode
$(el).children() = el.children
$(el).find(selector).length = el.querySelector(selector) !== null
$(el).next() = el.nextElementSibling

[0xD34F]

Там есть достаточно, чтобы не говнокодер самостоятельно дошёл до остального. Ответ дополнил.

[Андрей Брекоткин]

0xD34F, то есть можно было сразу подсказать ответ, а не ...
Ладно, спасибо за ответ! Просто когда читаешь 35ую статью на тему "как легко и быстро перейти с jq на js" - как то ждешь быстрых аналогов знакомых функций. И как я вижу выше, не все так просто.