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

jQuery“：contains（）”模拟纯JS

4 个答案: