【随時更新】jQueryからJavaScriptへの書き換えまとめ

セレクタ

[name!="value"]

指定された属性値をもたない要素を選択する。

jQuery

$('input[name!="newsletter"]')

JavaScript

document.querySelectorAll('input:not([name="newsletter"])')

デモ [name!="value"] without jQuery

:contains()

指定された文字列を含む要素を選択する。

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>

jQuery

$('div:contains(John)')
// =>
// [
//   <div>John Resig</div>,
//   <div>Malcom John Sinclair</div>,
// ]

JavaScript

Array.from(document.querySelectorAll('div')).filter(element => {
  return element.textContent.includes('John')
})

デモ :contains() without jQuery

.prev()

直前の兄弟要素を選択し、引数を指定するとそのセレクタと一致した要素を返す。

<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>

jQuery

$('p').prev()
// =>
// [
//   <div><span>Hello</span></div>,
//   <p class="selected">Hello Again</p>,
// ]

$('p').prev('.selected')
// =>
// [
//   <p class="selected">Hello Again</p>,
// ]

JavaScript

Array.from(document.querySelectorAll('p'), element => {
  return element.previousElementSibling
})

Array.from(document.querySelectorAll('p')).reduce((prev, next) => {
  return next.previousElementSibling.matches('.selected') ? [...prev, next.previousElementSibling] : prev
}, [])

デモ .prev() without jQuery

.prevAll()

直前の兄弟要素をすべて選択し、引数を指定するとそのセレクタと一致した要素を返す。

<ul>
  <li>list item 1</li>
  <li class="selected">list item 2</li>
  <li class="third-item">list item 3</li>
  <li class="selected">list item 4</li>
  <li>list item 5</li>
</ul>

jQuery

$('li.third-item').prevAll()
// =>
// [
//   <li class="selected">list item 2</li>,
//   <li>list item 1</li>,
// ]

$('li.third-item').prevAll('.selected')
// =>
// [
//   <li class="selected">list item 2</li>,
// ]

JavaScript

Array.from(document.querySelectorAll('li.third-item'), element => {
  const elements = []

  while (element = element.previousElementSibling) {
    elements.push(element)
  }

  return elements
}).flat()

Array.from(document.querySelectorAll('li.third-item'), element => {
  const elements = []

  while (element = element.previousElementSibling) {
    if (element.matches('.selected')) {
      elements.push(element)
    }
  }

  return elements
}).flat()

デモ .prevAll() without jQuery

.next()

直後の兄弟要素を選択し、引数を指定するとそのセレクタと一致した要素を返す。

<p>Hello</p>
<p class="selected">Hello Again</p>
<div><span>And Again</span></div>

jQuery

$('p').next()
// =>
// [
//   <p class="selected">Hello Again</p>,
//   <div><span>And Again</span></div>,
// ]

$('p').next('.selected')
// =>
// [
//   <p class="selected">Hello Again</p>,
// ]

JavaScript

Array.from(document.querySelectorAll('p'), element => {
  return element.nextElementSibling
})

Array.from(document.querySelectorAll('p')).reduce((prev, next) => {
  return next.nextElementSibling.matches('.selected') ? [...prev, next.nextElementSibling] : prev
}, [])

デモ .next() without jQuery

.nextAll()

直後の兄弟要素をすべて選択し、引数を指定するとそのセレクタと一致した要素を返す。

<ul>
  <li>list item 1</li>
  <li class="selected">list item 2</li>
  <li class="third-item">list item 3</li>
  <li class="selected">list item 4</li>
  <li>list item 5</li>
</ul>

jQuery

$('li.third-item').nextAll()
// =>
// [
//   <li class="selected">list item 4</li>,
//   <li>list item 5</li>,
// ]

$('li.third-item').nextAll('.selected')
// =>
// [
//   <li class="selected">list item 4</li>,
// ]

JavaScript

Array.from(document.querySelectorAll('li.third-item'), element => {
  const elements = []

  while (element = element.nextElementSibling) {
    elements.push(element)
  }

  return elements
}).flat()

Array.from(document.querySelectorAll('li.third-item'), element => {
  const elements = []

  while (element = element.nextElementSibling) {
    if (element.matches('.selected')) {
      elements.push(element)
    }
  }

  return elements
}).flat()

デモ .nextAll() without jQuery

.siblings()

兄弟要素を選択する。

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

jQuery

$('li.third-item').siblings()
// =>
// [
//   <li>list item 1</li>,
//   <li>list item 2</li>,
//   <li>list item 4</li>,
//   <li>list item 5</li>,
// ]

JavaScript

Array.from(new Set(
  Array.from(document.querySelectorAll('li.third-item'), a => {
    return Array.from(a.parentElement.children).filter(b => b !== a)
  }).flat(Infinity)
)).sort((a, b) => {
  return a === b ? 0
         : a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_PRECEDING ? 1
         : -1
})

デモ . siblings() without jQuery

.parent()

親要素を選択し、引数を指定するとそのセレクタと一致した要素を返す。

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

jQuery

$('li.item-a').parent()
// =>
// <ul class="level-2">
//   <li class="item-a">A</li>
//   <li class="item-b">B
//     <ul class="level-3">
//       <li class="item-1">1</li>
//       <li class="item-2">2</li>
//       <li class="item-3">3</li>
//     </ul>
//   </li>
//   <li class="item-c">C</li>
// </ul>

$('li.item-a').parent('ul.level-2')
// =>
// <ul class="level-2">
//   <li class="item-a">A</li>
//   <li class="item-b">B
//     <ul class="level-3">
//       <li class="item-1">1</li>
//       <li class="item-2">2</li>
//       <li class="item-3">3</li>
//     </ul>
//   </li>
//   <li class="item-c">C</li>
// </ul>

JavaScript

Array.from(document.querySelectorAll('li.item-a'), element => {
  return element.parentElement
})

Array.from(document.querySelectorAll('li.item-a')).reduce((prev, next) => {
  return next.parentElement.matches('ul.level-2') ? [...prev, next.parentElement] : prev
}, [])

.parents()

自分を含めない祖先要素をすべて選択し、引数を指定するとそのセレクタと一致した要素を返す。

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

jQuery

$('li.item-a').parents()
// =>
// [
//   <ul class="level-2">...</ul>,
//   <li class="item-ii">...</li>,
//   <ul class="level-1">...</ul>,
//   <body>...</body>,
//   <html>...</html>,
// ]

$('li.item-a').parents('ul')
// =>
// [
//   <ul class="level-2">...</ul>,
//   <ul class="level-1">...</ul>,
// ]

JavaScript

Array.from(
  new Set(
    Array.from(document.querySelectorAll('li.item-a'), element => {
      const elements = []

      while (element = element.parentElement) {
        elements.push(element)
      }

      return elements
    }).flat()
  )
).sort((a, b) => {
  return a === b ? 0
         : a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_PRECEDING ? -1
         : 1
})

Array.from(
  new Set(
    Array.from(document.querySelectorAll('li.item-a'), element => {
      const elements = []

      while (element = element.parentElement) {
        if (element.matches('ul')) {
          elements.push(element)
        }
      }

      return elements
    }).flat()
  )
).sort((a, b) => {
  return a === b ? 0
         : a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_PRECEDING ? -1
         : 1
})

デモ .parents() without jQuery

.closest()

自分も含めた直近の親要素を選択する。

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

jQuery

$('li.item-a').closest('ul')
// =>
// <ul class="level-2">
//   <li class="item-a">A</li>
//   <li class="item-b">B
//     <ul class="level-3">
//       <li class="item-1">1</li>
//       <li class="item-2">2</li>
//       <li class="item-3">3</li>
//     </ul>
//   </li>
//   <li class="item-c">C</li>
// </ul>

JavaScript

Array.from(document.querySelectorAll('li.item-a'), element => {
  return element.closest('ul')
})

デモ .closest() without jQuery

.find()

現在取得されている要素から子孫要素を選択する。

<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>

jQuery

$('p').find('span')
// =>
// [
//   <span>Hello</span>,
//   <span>good</span>,
// ]

JavaScript

Array.from(document.querySelectorAll('p'), element => {
  return Array.from(element.querySelectorAll('span'))
}).flat()

デモ .find() without jQuery

.has()

指定した子孫要素をもつ要素を選択する。

<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

jQuery

$('li').has('ul')
// =>
// <li>list item 2
//   <ul>
//     <li>list item 2-a</li>
//     <li>list item 2-b</li>
//   </ul>
// </li>

JavaScript

document.querySelectorAll('li:has(ul)')

デモ .has() without jQuery

.eq()

指定された番目の要素を選択する。

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

jQuery

$('li').eq(2)
// =>
// <li>list item 3</li>

$('li').eq(-2)
// =>
// <li>list item 4</li>

JavaScript

document.querySelectorAll('li')[2]

Array.from(document.querySelectorAll('li')).at(-2)

デモ .eq() without jQuery

.index()

要素が何番目にあるかを取得する。

<ul>
  <li id="foo">foo</li>
  <li id="bar" class="selected">bar</li>
  <li id="baz" class="selected">baz</li>
</ul>

jQuery

$('#bar').index()
// => 1

$('li.selected').index($('#bar'))
// => 0

JavaScript

Array.from(document.querySelector('#bar').parentElement.children).indexOf(document.querySelector('#bar'))

Array.from(document.querySelectorAll('li.selected')).indexOf(document.querySelector('#bar'))

デモ .index() without jQuery

.slice()

マッチした要素のうち、特定の範囲を取り出す。

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

jQuery

$('li').slice(2)
// =>
// [
//   <li>list item 3</li>,
//   <li>list item 4</li>,
//   <li>list item 5</li>,
// ]

$('li').slice(2, 4)
// =>
// [
//   <li>list item 3</li>,
//   <li>list item 4</li>,
// ]

$('li').slice(-2, -1)
// =>
// [
//   <li>list item 4</li>,
// ]

JavaScript

Array.from(document.querySelectorAll('li')).slice(2)

Array.from(document.querySelectorAll('li')).slice(2, 4)

Array.from(document.querySelectorAll('li')).slice(-2, -1)

デモ .slice() without jQuery

スタイル

.css()

マッチした要素のうち、1 つ目の要素のスタイルを取得または設定する。

<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>

#box1 {
  width: 50px;
  color: yellow;
  background-color: blue;
}
#box2 {
  width: 80px;
  color: rgb(255, 255, 255);
  background-color: rgb(15, 99, 30);
}
#box3 {
  width: 40px;
  color: #fcc;
  background-color: #123456;
}
#box4 {
  width: 70px;
  background-color: #f11;
}

jQuery

$('#box1').css('background-color')
// => "rgb(0, 0, 255)"

$('#box2').css(['width', 'height', 'color', 'background-color'])
// =>
// {
//   "width": "80px",
//   "height": "18.3984px",
//   "color": "rgb(255, 255, 255)",
//   "background-color": "rgb(15, 99, 30)",
// }

$('#box3').css('color', 'red')

$('#box4').css({'background-color': 'yellow', 'font-weight': 'bolder'})

JavaScript

window.getComputedStyle(document.querySelector('#box1')).getPropertyValue('background-color')

['width', 'height', 'color', 'background-color'].reduce((prev, next) => {
  return {...prev, [next]: window.getComputedStyle(document.querySelector('#box2')).getPropertyValue(next)}
}, {})

document.querySelector('#box3').style.setProperty('color', 'red')

Object.assign(document.querySelector('#box4').style, {
  'background-color': 'yellow',
  'font-weight': 'bold',
})

デモ .css() without jQuery

.scrollTop()

スクロール領域の位置を取得でき、引数を指定するとその位置までスクロールさせる。

jQuery

$(window).scrollTop()

$(window).scrollTop(80)

JavaScript

document.scrollingElement.scrollTop

window.scrollTo(0, 80)

デモ .scrollTop() without jQuery

DOM操作

.before()

要素の直前に兄弟要素を追加する。

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

jQuery

$('.inner').before('<p>Test</p>')
// =>
// <div class="container">
//   <h2>Greetings</h2>
//   <p>Test</p>
//   <div class="inner">Hello</div>
//   <p>Test</p>
//   <div class="inner">Goodbye</div>
// </div>

$('.container').before($('h2'))
// =>
// <h2>Greetings</h2>
// <div class="container">
//   <div class="inner">Hello</div>
//   <div class="inner">Goodbye</div>
// </div>

JavaScript

document.querySelectorAll('.inner').forEach(element => {
  element.insertAdjacentHTML('beforebegin', '<p>Test</p>')
})

document.querySelectorAll('h2').forEach(content => {
  document.querySelectorAll('.container').forEach((element, index) => {
    element.insertAdjacentElement('beforebegin', index === 0 ? content : content.cloneNode(true))
  })
})

デモ .before() without jQuery

.after()

要素の直後に兄弟要素を追加する。

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

jQuery

$('.inner').after('<p>Test</p>')
// =>
// <div class="container">
//   <h2>Greetings</h2>
//   <div class="inner">Hello</div>
//   <p>Test</p>
//   <div class="inner">Goodbye</div>
//   <p>Test</p>
// </div>

$('.container').after($('h2'))
// =>
// <div class="container">
//   <div class="inner">Hello</div>
//   <div class="inner">Goodbye</div>
// </div>
// <h2>Greetings</h2>

JavaScript

document.querySelectorAll('.inner').forEach(element => {
  element.insertAdjacentHTML('afterend', '<p>Test</p>')
})

document.querySelectorAll('h2').forEach(content => {
  document.querySelectorAll('.container').forEach((element, index) => {
    element.insertAdjacentElement('afterend', index === 0 ? content : content.cloneNode(true))
  })
})

デモ .after() without jQuery

.append()

要素内の末尾に子要素を追加する。引数に既存の要素を追加すると移動されるので注意。

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

jQuery

$('.inner').append('<p>Test</p>')
// =>
// <h2>Greetings</h2>
// <div class="container">
//   <div class="inner">Hello
//     <p>Test</p>
//   </div>
//   <div class="inner">Goodbye
//     <p>Test</p>
//   </div>
// </div>

$('.inner').append($('h2'))
// =>
// <div class="container">
//   <div class="inner">Hello
//     <h2>Greetings</h2>
//   </div>
//   <div class="inner">Goodbye
//     <h2>Greetings</h2>
//   </div>
// </div>

JavaScript

document.querySelectorAll('.inner').forEach(element => {
  element.insertAdjacentHTML('beforeend', '<p>Test</p>')
})

document.querySelectorAll('h2').forEach(content => {
  document.querySelectorAll('.inner').forEach((element, index) => {
    element.insertAdjacentElement('beforeend', index === 0 ? content : content.cloneNode(true))
  })
})

デモ .append() without jQuery

.replaceWith()

要素を置換する。

<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>

jQuery

$('div.second').replaceWith('<h2>New heading</h2>')
// =>
// <div class="container">
//   <div class="inner first">Hello</div>
//   <h2>New heading</h2>
//   <div class="inner third">Goodbye</div>
// </div>

$('div.third').replaceWith($('.first'))
// =>
// <div class="container">
//   <div class="inner second">And</div>
//   <div class="inner first">Hello</div>
// </div>

JavaScript

document.querySelectorAll('div.second').forEach(element => {
  const content = new DOMParser().parseFromString('<h2>New heading</h2>', 'text/html').body.firstChild

  element.replaceWith(content)
})

document.querySelectorAll('div.third').forEach((element, index) => {
  const content = document.querySelectorAll('.first')

  element.replaceWith(...(index === 0 ? content : Array.from(content, element => element.cloneNode(true))))
})

.remove()

要素を削除する。

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

jQuery

$('.hello').remove()
// =>
// <div class="container">
//   <div class="goodbye">Goodbye</div>
// </div>

$('div').remove('.hello')
// =>
// <div class="container">
//   <div class="goodbye">Goodbye</div>
// </div>

JavaScript

document.querySelectorAll('.hello').forEach(element => {
  element.remove()
})

Array.from(document.querySelectorAll('div')).filter(element => {
  return element.matches('.hello')
}).forEach(element => {
  element.remove()
})

デモ .remove() without jQuery

.wrap()

指定された HTML で要素を囲む。

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

jQuery

$('.inner').wrap('<div class="new"></div>')
// =>
// <div class="container">
//   <div class="new">
//     <div class="inner">Hello</div>
//   </div>
//   <div class="new">
//     <div class="inner">Goodbye</div>
//   </div>
// </div>

JavaScript

document.querySelectorAll('.inner').forEach(element => {
  const wrapper = new DOMParser().parseFromString('<div class="new"></div>', 'text/html').body.firstChild

  element.replaceWith(wrapper)
  wrapper.append(element)
})

デモ .wrap() without jQuery

.wrapInner()

指定された HTML で要素の中身を囲む。

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

jQuery

$('.inner').wrapInner('<div class="new"></div>')
// =>
// <div class="container">
//   <div class="inner">
//     <div class="new">Hello</div>
//   </div>
//   <div class="inner">
//     <div class="new">Goodbye</div>
//   </div>
// </div>

JavaScript

document.querySelectorAll('.inner').forEach(element => {
  const wrapper = new DOMParser().parseFromString('<div class="new"></div>', 'text/html').body.firstChild

  wrapper.append(...element.children)
  element.prepend(wrapper)
})

デモ .wrapInner() without jQuery

.wrapAll()

指定された HTML で要素をまとめて囲む。

<span>Span Text</span>
<strong>What about me?</strong>
<span>Another One</span>

jQuery

$('span').wrapAll('<div class="new"></div>')
// =>
// <div class="new">
//   <span>Span Text</span>
//   <span>Another One</span>
// </div>
// <strong>What about me?</strong>

JavaScript

const wrapper = new DOMParser().parseFromString('<div class="new"></div>', 'text/html').body.firstChild
const spans = document.querySelectorAll('span')

spans[0].before(wrapper)
wrapper.append(...spans)

デモ .wrapAll() without jQuery

.unwrap()

親要素を取り除く。

<div>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</div>

jQuery

$('p').unwrap()
// =>
// <p>Hello</p>
// <p>cruel</p>
// <p>World</p>

JavaScript

Array.from(
  new Set(
    Array.from(document.querySelectorAll('p'), element => {
      return element.parentElement
    })
  )
).forEach(element => {
  element.replaceWith(...element.children)
})

デモ .unwrap() without jQuery

.each()

要素に対して繰り返し処理を行う。

jQuery

$('li').each((index, element) => {})

JavaScript

document.querySelectorAll('li').forEach((element, index) => {})

デモ .each() without jQuery

プロミス

.always()

プロミスの失敗や成功にかかわらず必ず実行される。

jQuery

const sleep = ms => {
  const d = $.Deferred()

  setTimeout(d.resolve, ms)

  return d.promise()
}

sleep(300).always(() => {})

JavaScript

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

sleep(300).finally(() => {})

デモ .always() without jQuery

$.when()

複数のプロミスを並列処理でき、すべての結果が返ったときに成功となる。複数のプロミスのうち、1つでも失敗すると途中で処理が終了する。

jQuery

const sleep = ms => {
  const d = $.Deferred()

  setTimeout(d.resolve, ms)

  return d.promise()
}

$.when(sleep(300), sleep(500), sleep(800)).done(() => {
  console.log('成功')
})

JavaScript

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

Promise.all([sleep(300), sleep(500), sleep(800)]).then(() => {
  console.log('成功')
})

デモ $.when() without jQuery

ユーティリティ

$.grep()

配列から特定の条件を満たす要素だけを取り出す。

jQuery

$.grep([1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1], (number, index) => {
  return number !== 5 && index > 4
})
// => [1, 9, 4, 7, 3, 8, 6, 9, 1]

$.grep([1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1], (number, index) => {
  return number !== 5 && index > 4
}, true)
// => [1, 9, 3, 8, 6, 5]

JavaScript

[1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1].filter((number, index) => {
  return number !== 5 && index > 4
})

[1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1].filter((number, index) => {
  return !(number !== 5 && index > 4)
})

$.uniqueSort()

DOM 要素の配列から重複を削除し、ページ内の DOM の順番に並び替える。

<div>There are 6 divs in this document.</div>
<div></div>
<div class="dup"></div>
<div class="dup"></div>
<div class="dup"></div>
<div></div>

jQuery

const divs = $('div').get().concat($('.dup').get())

$.uniqueSort(divs)
// =>
// [
//   <div>There are 6 divs in this document.</div>,
//   <div></div>,
//   <div class="dup"></div>,
//   <div class="dup"></div>,
//   <div class="dup"></div>,
//   <div></div>,
// ]

JavaScript

const divs = Array.from(document.querySelectorAll('div')).concat(Array.from(document.querySelectorAll('.dup')))

Array.from(new Set(divs)).sort((a, b) => {
  return a === b ? 0
         : a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_PRECEDING ? 1
         : -1
})

デモ $.uniqueSort() without jQuery