jQuery ": содержит()" аналог для чистого JS

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, вы можете получить неожиданные результаты с его ответом. Вот мой:

var aTags = document.getElementsByTagName("a"); 
var matchingTag; 

for (var i = 0; i < aTags.length; i++) { 

    if (aTags[i].className == "swchItem") { 
     for (var j = 0; j < aTags[i].childNodes.length; j++) { 
      if (aTags[i].childNodes[j].innerHTML == "1") { 
       matchingTag = aTags[i].childNodes[j]; 
      } 
     } 
    } 
} 

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; 
}