代码之家 › 专栏 › 技术社区 › Mike Purcell

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

jssor xpath html php

0

Mike Purcell · 技术社区 · 8 年前

我们需要支持两个基于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));

2 回复 | 直到 8 年前

1

0

sylar wang 8 年前

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

//只需使用类“none embedded slider wrap”在DIV中包装其他图像 / /

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

2

0

Mike Purcell 8 年前

解决了这个问题。我处理xpath查询的方式与处理jquery元素选择器的方式相同。我在手术中没有提到的是 embedded-slider-wrap 类不是应用于DIV的唯一类(老实说,它并不重要b/c jquery可以选择具有多个类的元素)。

显然,如果元素有多个类,xpath将不匹配基于类名的元素查询,而是必须执行以下操作:

// 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")]]