2017.11.04

jQueryのeq()やindex()を生JavaScriptで実装する脱jQuery

生JavaScriptで番目を指定する eq() や逆に何番目かを取得する index() を実装してみます。

`eq()`


var eq = function(selector, index) {
  var nodeList = document.querySelectorAll(selector),
      length = nodeList.length;
  
  if (0 < index && index < length) {
    return nodeList[index];
  }
  
  if (0 <= length + index) {
    return nodeList[length + index];
  }
  
  return null;
};

使い方


<div class="list">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>


var element = eq('.list > .item', 2);
// => <div class="item">3</div>

var element = eq('.list > .item', -2);
// => <div class="item">4</div>

jQueryと同じようにマイナスの値を指定したときには後ろから数えるようにしています。

`index()`


var index = function(selector, target) {
  var nodeList = document.querySelectorAll(selector),
      element = document.querySelector(target);
  
  // 第2引数を省略したとき
  if (typeof target === 'undefined') {
    return Array.prototype.indexOf.call(nodeList[0].parentNode.children, nodeList[0]);
  }
  
  return Array.prototype.indexOf.call(nodeList, element);
};

使い方


<div class="list">
  <p class="item">1</p>
  <span class="item">2</span>
  <span class="item">3</span>
  <p class="item">4</p>
  <p class="item active">5</p>
  <span class="item">6</span>
</div>


var index = index('.active');
// => 4

var index = index('.list > .item', '.active');
// => 4

var index = index('.list > p', '.active');
// => 2

第1引数で検索する要素の集合を指定して、第2引数で実際に検索する要素を指定します。

CSS本執筆しました！！！

CSS本出します！1/29発売予定
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs
— たかもそ＠CSS本1/29発売!! (@takamosoo) 2018年12月31日