Javascript jQuery"；：包含（）；纯JS的模拟

我正在为CasperJS写脚本。我需要单击包含带“1”的跨距的链接。在jQuery中可以使用

：contains（'1'）

，但是纯Javascript中选择器的解决方案是什么

HTML:

12

jQuery变量：

$（'a.swchItem span:contains（“1”））

UPDCasperJS代码：

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

var span=document.getElementsByTagName（'span'），
len=跨度。长度，
i=0，
res=[]；
对于（；i

---

除非浏览器支持本机css查询，否则您必须执行此操作。

请尝试以下操作。我的答案和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];
            }
        }
    }
}

var-aTags=document.getElementsByTagName（“a”）；
var匹配标记；
对于（变量i=0；i

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

//一些辅助函数
函数hasClass（el，类名）{
var re=new RegExp（“（^ | \\s）”+className+”（\\s |$）；
返回重新测试（el.className）；
}
函数到阵列（o）{
var a=[]；
对于（var i=0，iLen=o.length；iSince，CasperJS提供了，因此您可以编写如下内容：

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

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

希望这能有所帮助。
伪类
：contains（）
不再是CSS标准的一部分，因此
querySelectorAll（）
无法识别。也就是说，您确实可以参考源代码来了解jQuery/Sizzle如何实现
：contains（）
使用JS。我花了一点时间浏览jQuery，我真的不想看到它是如何运行的
：contains
。它应该像匹配textContent或innerText（受支持的）一样运行，尽管它可能使用自己的
text
函数（这是不必要的，速度较慢，但我不知道它是否真的是这样）。
var x = require('casper').selectXPath;

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