Question

我有一个包含文本和一些html元素的字符串。我想找到具有 size-thumbnail 类的 img 元素，并在其周围添加一些html。

例如，发件人：

<img class="size-thumbnail wp-image-279 alignleft" title="fellaisworkinghard" src="workinghard-150x150.png" alt="" height="150" width="150">

要

<div style="width:150px;" class="article-image">
    <img class="size-thumbnail wp-image-279 alignleft" title="fellaisworkinghard" src="workinghard-150x150.png" alt="" height="150" width="150">
    <span style="width:150px;" class="article-image-content">BLABLA</span>
</div>

div和span元素的宽度取自图像的宽度。这是最好的方法，怎么做？

我想过使用正则表达式来获得高度，但我不知道如何在正确的位置添加其他所有内容。

Answer 1

您可以使用http://www.php.net/manual/en/class.domelement.php DOM元素来查找和操作HTML。

我正在使用和推荐http://framework.zend.com/manual/en/zend.dom.query.html Zend_Dom_Query来查找和操作html。它完美地运作。

（如果你想在同一页面上进行这种操作，你需要缓冲，操作并将其刷新到浏览器。）

Answer 2

你总是可以抛出jQuery。让您的主题入队jquery，并将其添加到标题中。

jQuery(document).ready( function () {
    jQuery(".size-thumbnail").wrap("<div style='width:150px;' class='article-image'/>");
    jQuery(".size-thumbnail").after("<span style='width:150px;' " + 
                                    "class='article-image-content'>BLABLA</span>");
});

不是最优雅的解决方案，但它会产生预期的结果......

查找，获取和添加html到元素

2 个答案: