xpath-根据是否在指定的DIV内查询图像

我们需要支持两个基于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查询,一个用于标记为滑块环绕(可能有多个)的div中的所有图像,以及不包含在滑块环绕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 返回所有图像(应为),而 $imagesSlide 没有。

此外,我尝试执行非XPath查询,这样就不必对“所有图像”查询执行任何额外的处理,但也无法使其按预期工作,它看起来像:

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