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引数で実際に検索する要素を指定します。