純粋なJSのためのjQuery "：contains（）"アナログ

Question

私はCasperJS用のスクリプトを書いています。 "1"のスパンを含むリンクをクリックする必要があります。 jQueryで:contains('1')を使用することができますが、ソリューションは純粋なJavascriptのセレクタのために何ですか？

HTML：<a class="swchItem"><span>1</span></a><a class="swchItem"><span>2</span></a>

jQueryの変種：$('a .swchItem span:contains("1")')

UPD CasperJSコード：

casper.then(function() { 
    this.click('a .swchItem *select span with 1*') 
}) 

Answer 1

を0.6.8ので、CasperJSは、XPath supportを提供していますので、タグ名で要素を取得クラスにフィルタリングし、コンテンツにマッチして内部のスパンを探しているわけでしょう

：

var x = require('casper').selectXPath; 

casper.then(function() { 
    this.click(x('//span[text()="1"]')) 
}) 

希望します。

Answer 2

var spans = document.getElementsByTagName('span'), 
    len = spans.length, 
    i = 0, 
    res = []; 

for (; i < len; i++) { 
    if (spans.innerHTML == 1) res.push(spans[i]); 
} 

ブラウザのサポートネイティブCSSのクエリしない限り、何をすべきかです。

Answer 3

以下を試してください。私とgillescの答えの違いは、あなたが指定したクラス名のaタグを取得しているだけなので、そのクラスのないページにaタグがあれば、予期せぬ結果が出る可能性があります。ここに私のものがあります：

Answer 4

jQueryはjavascriptです。また、代替エンジンとして多数のセレクタエンジンが用意されています。

ゼロから実行したい場合は、querySelectorAllを使用して適切なコンテンツ（コンテンツセレクタが実装されていないことが前提）を探し、それが利用できない場合は独自のものを実装できます。あなたはこのような何かを書くことができるように

// Some helper functions 
function hasClass(el, className) { 
    var re = new RegExp('(^|\\s)' + className + '(\\s|$)'); 
    return re.test(el.className); 
} 

function toArray(o) { 
    var a = []; 
    for (var i=0, iLen=o.length; i<iLen; i++) { 
    a[i] = o[i]; 
    } 
    return a; 
} 

// Main function 
function getEls() { 

    var result = [], node, nodes; 

    // Collect spans inside A elements with class swchItem 
    // Test for qsA support 
    if (document.querySelectorAll) { 
     nodes = document.querySelectorAll('a.swchItem span'); 

    // Otherwise... 
    } else { 

     var as = document.getElementsByTagName('a'); 
     nodes = []; 

     for (var i=0, iLen=as.length; i<iLen; i++) { 
     a = as[i]; 

     if (hasClass(a, 'swchItem')) { 
      nodes = nodes.concat(toArray(a.getElementsByTagName('span'))); 
     } 
     } 
    } 

    // Filter spans on content 
    for (var j=0, jLen=nodes.length; j<jLen; j++) { 
     node = nodes[j]; 

     if ((node.textContent || node.innerHTML).match('1')) { 
     result.push(node); 
     } 
    } 
    return result; 
}