CasperJS 中的 CSS 和 XPath 选择器

Question

这个函数效果很好，（这为每个<div class = "menuRayonContent avecLiens" ..> 提供了所有<div class = "menuFamille" ..>）

function getnb1() {
  var num1 = document.querySelectorAll(".menuRayonContent.avecLiens .menuFamille");// I get all divs menuFamille each div with class as "menuRayonContent avecLiens"
  return Array.prototype.map.call(num1, function (e) {
     try {
         return (/url\?q=(.*)&sa=U/).exec(e.getAttribute("href"))[1]
     } catch (err) {
         return e.getAttribute("href");
     }
  });
}

但是有类只是“menuRayonContent”的div，所以结果为0，我不知道如何找到所有具有或不带“avecLiens”类的div

我会照着做的

function getnb2() {
  var num1 = document.querySelectorAll (".menuRayonContent .menuFamille"); // I get all //divs menuFamille each div with class as "menuRayonContent"
  return Array.prototype.map.call(num1, function (e) {
      try {
         return (/url\?q=(.*)&sa=U/).exec(e.getAttribute("href"))[1]
      } catch (err) {
         return e.getAttribute("href");
      }
  });
}

这个账号在页面里都是<div class = "menuFamille" ..>。

因为页面是这样的

<div class = "menuRayonContent avecLiens" style = "display: block;">
<div class = "menuFamille" idCat = "1024" typecat = "2">
<div class = "menuFamille" idCat = "1025" typecat = "2">
<div class = "menuFamille" idCat = "1026" typecat = "2">
<div class = "menuFamille" idCat = "290" typecat = "2">
<div class = "menuFamille" idCat = "2595" typecat = "2">
  ..........
  ...........
<div class = "menuRayonContent " style = "display: none;">
<div class = "menuFamille" idCat = "4024" typecat = "2">
<div class = "menuFamille" idCat = "1325" typecat = "2">
<div class = "menuFamille" idCat = "1226" typecat = "2">
<div class = "menuFamille" idCat = "2590" typecat = "2">
<div class = "menuFamille" idCat = "1595" typecat = "2">
.............
.............
<div class = "menuRayonContent " style = "display: none;">
<div class = "menuFamille" idCat = "4024" typecat = "2">
<div class = "menuFamille" idCat = "1325" typecat = "2">
<div class = "menuFamille" idCat = "1226" typecat = "2">
<div class = "menuFamille" idCat = "2590" typecat = "2">
<div class = "menuFamille" idCat = "1595" typecat = "2">

...........
...........

或者像这样

<div class = "menuRayonContent avecLiens" style = "display: none;">
<div class = "menuFamille" idCat = "1024" typecat = "2">
<div class = "menuFamille" idCat = "1025" typecat = "2">
<div class = "menuFamille" idCat = "1026" typecat = "2">
<div class = "menuFamille" idCat = "290" typecat = "2">
<div class = "menuFamille" idCat = "2595" typecat = "2">
..........
...........
<div class = "menuRayonContent " style = "display: block;">
<div class = "menuFamille" idCat = "4024" typecat = "2">
<div class = "menuFamille" idCat = "1325" typecat = "2">
<div class = "menuFamille" idCat = "1226" typecat = "2">
<div class = "menuFamille" idCat = "2590" typecat = "2">
<div class = "menuFamille" idCat = "1595" typecat = "2">
.............
.............
<div class = "menuRayonContent " style = "display: none;">
<div class = "menuFamille" idCat = "4024" typecat = "2">
<div class = "menuFamille" idCat = "1325" typecat = "2">
<div class = "menuFamille" idCat = "1226" typecat = "2">
<div class = "menuFamille" idCat = "2590" typecat = "2">
<div class = "menuFamille" idCat = "1595" typecat = "2">
...........
...........

我想计算类属性 = "menuRayonContent" 或 class= "menuRayonContent avecLiens" 和 style = "display: block;" 的 div但直到现在我不能，（我使用 casperjs）

这是我的功能：

function getnb() {
  var links = __utils__.getElementsByXPath(x('//div[contains(class, "menuRayonContent" && style = "display: block;")]'));
  return Array.prototype.map.call (links, function (e) {
     return e.getAttribute('href');
  });
}

Answer 1

现在所有的错别字都消失了，重申您要选择.menuRayonContent 下所有可见的.menuFamille 元素，并且您希望它们分开。这意味着您必须遍历容器，然后遍历子项。

CasperJS 的 clientutils 模块有一个未记录的函数{boolean} elementVisible({DOM element} elem)。您可以使用它来遍历所有可见的.menuRayonContent，然后与他们的孩子一起建立一个列表。

var container = document.querySelectorAll(".menuRayonContent");
container = Array.prototype.map.call(container, function (c) {
    var obj = {
        number: 0,
        children: null,
        visible: __utils__.elementVisible(c),
        className: c.getAttribute("class")
    };
    var children = c.querySelectorAll(".menuFamille");
    children = Array.prototype.map.call(children, function (child) {
        return child.getAttribute("idCat"); // or something else that you need
    });
    obj.number = children.length;
    obj.children = children;
    return obj;
});

对于您的示例 DOM，这应该产生：

container = [
    {
        number: 5,
        children: [
            "1024", "1025", "1026", "290", "2595"
        ],
        visible: true,
        className: "menuRayonContent avecLiens"
    },
    {
        number: 5,
        children: [
            "4024", "1325", "1226", "2590", "1595"
        ],
        visible: true,
        className: "menuRayonContent"
    }
];

您当然可以使用

来过滤掉不可见的.menuRayonContent 元素

var container = document.querySelectorAll(".menuRayonContent[style*='display'][style*='block']");

[attr*='value'] 匹配所有attr 属性在某处包含value 的元素。