Question

您好我正在尝试将包含特定类的图像（pinthis就是此示例）包含在我将为其添加架构信息的范围中。这是一个基本示例，我还需要注入其他模式信息。为了让我开始，任何人都可以帮助我从我现有的代码到我的示例输出。我需要动态更新多个页面，一些内容将通过PHP从Wordpress分类法和其他数据中获得，所以如果可能的话，我更愿意在PHP中进行。

<p>
<a class="fancybox" rel="gallery1" href="image.jpg">
<img src="img.jpg" alt="alt text" width="1000" height="1000" class="various classes including ... pinthis">
</a>
</p>

我想成为......

<p>
<a class="fancybox" rel="gallery1" href="image.jpg">
<span itemscope itemtype="http://schema.org/ImageObject">
<img src="img.jpg" alt="alt text" width="1000" height="1000" class="various classes including ... pinthis">
</span>
</a>
</p>

我想如果有人可以指出我正确的方向，并给我一个推动开始，这将给我足够的从那里继续

非常感谢。

Answer 1

使用PHP DOMDocument，您可以执行以下操作：

$html = '<p><a class="fancybox" rel="gallery1" href="image.jpg"><img src="img.jpg" alt="alt text" width="1000" height="1000" class="various classes pinthis"></a></p>';

// Create a DOMDocument and load the HTML.
$dom = new DOMDocument();
$dom->loadHTML($html);

// Create the span wrapper.
$span = $dom->createElement('span');
$span->setAttribute('itemscope', '');
$span->setAttribute('itemtype', 'http://schema.org/ImageObject');

// Get all the images. 
$images = $dom->getElementsByTagName('img');

// Loop the images.
foreach ($images as $image) {

    // Only affect those with the pinthis class.
    if (strpos($image->getAttribute('class'), 'pinthis') !== false) {

        // Clone the span if we need to use it often.
        $span_clone = $span->cloneNode();

        // Replace the image tag with the span tag.
        $image->parentNode->replaceChild($span_clone, $image);

        // Add the image tag as a child of the new span tag.
        $span_clone->appendChild($image);
    }
}

// Get your HTML with saveHTML()
$html = $dom->saveHTML();
echo $html;

只需修改代码即可满足您的特定需求。例如，如果您需要更改span标记属性，如果要更改类以进行搜索等等，您甚至可能希望创建一个可以指定类和范围属性的函数。

DOMDocument的文档：http://php.net/manual/en/class.domdocument.php

Answer 2

使用warpAll

检查image是否需要class
如果图片有课程，则wrap带有所需的<span></span>

以这种方式尝试：

if ($('img.classes').hasClass('pinthis')){
       $('img.classes').wrapAll('<span itemscope itemtype="http://schema.org/ImageObject">></span>');
}

Fiddle Demo

有用的帖子： jquery, wrap elements inside a div

PHP - 使用span标记包装图像

2 个答案: