XPath

Question

我们需要支持两个基于 jquery 的图像 api，jquery.lazy 处理普通图像的延迟加载，jssor 将多个图像转换为一个滑块，它有自己的滑块延迟加载图像的内部机制。为了完成这项工作，我们需要将每个图像的 src 属性转换为 data-src (jquery.lazy) 或 src2 (jssor).

html 看起来像这样：

<div id="campaign-content">
    <div id="slide-show-1" class="embedded-slider-wrap">
        <div>
             <img src="/path/to/1.jpg" />
        </div>
        <div>
             <img src="/path/to/2.jpg" />
        </div>
    </div>
    <figure>
         <img src="/path/to/3.jpg" />
    </figure>
    <div id="slide-show-2" class="embedded-slider-wrap">
        <div>
             <img src="/path/to/4.jpg" />
        </div>
        <div>
             <img src="/path/to/5.jpg" />
        </div>
    </div>
</div>

目标是发出两个 xpath 查询，一个用于 divs 内标记为滑块环绕（其中可能有多个）的所有图像，以及不包含在滑块内的所有图像-换行 div.

为了降低 xpath 查询的复杂性，我认为只查询幻灯片图像然后查询所有图像可能更容易，例如：

$imagesSlide = $xpath->query(sprintf('//div[@id="%s"]//div[@class="embedded-slider-wrap"]//img', $id));
$imagesOther = $xpath->query(sprintf('//div[@id="%s"]//img', $id));

然后逐一检查并设置正确的属性（data-src 或 src2）。我遇到的问题是，$imagesOther returns 所有图像的 xpath 查询（预期），而 $imagesSlide 的 xpath 查询没有。

此外，我尝试执行 NOT xpath 查询，这样我就不必对 ALL images 查询进行任何额外处理，但也无法使其按预期工作，它看起来像：

$images = $xpath->query(sprintf('//div[@id="%s"]//img[not(ancestor::div/@class="embedded-slider-wrap")]', $id));

Answer 1

$imagesSlide = $('.embedded-slider-wrap img')

//将其他图片包裹在div中，用class 'none-embedded-slider-wrap' //

$imagesOther = $('.none-embedded-slider-wrap img')

Answer 2

问题已解决。我以与处理 jquery 元素 selectors 相同的方式处理 xpath 查询。我在 OP 中没有提到的是 embedded-slider-wrap class 并不是唯一应用于 div 的 class（老实说我认为这并不重要 b/c jQuery 可以 select 个具有多个 class 的元素。

显然，如果元素有多个 class，则 XPath 不会匹配基于 class 名称的元素查询，相反，您必须执行以下操作：

// Element with multiple classes
<div class="embedded-slider-wrap some-other-class">
    <img src="/path/to/image/1.png" />

// Non working Xpath query
//img[ancestor::div[@class="embedded-slider-wrap"]]//img

// Working Xpath query
//img[ancestor::div[contains(@class, "embedded-slider-wrap")]]

XPath - 根据是否在指定范围内查询图片 div

XPath - Query images based on whether inside specified div

html

php

jssor