javascript - CasperJS中的CSS和XPath选择器

此功能非常有效（（每个<div class = "menuFamille" ..>给出所有<div class = "menuRayonContent avecLiens" ..>））

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

但是有些div的类只是“ menuRayonContent”，因此结果为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”或类=“ menuRayonContent avecLiens”和样式=“ 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');
  });
}

最佳答案

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

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的所有元素。