使用DOM在具有特定類別的IMG後插入DIV

Question

因此這是針對WordPress的。我想要做的是在我的主題的functions.php文件中創建一些修改。我想要做的就是獲取WordPress圖像的ID，然後在圖像本身之後添加一個<div>，如果圖像包含類dd-star-rating。

注：

• 的圖像ID是 「class」 屬性內。它會像wp-image-X（其中X是圖像的ID）。我想這個存儲在一個名爲變量$id

• 我希望它添加<div>Star Rating ID = $id</div>具有類dd-star-rating

繼承人什麼是存儲在$content變量的例子中，每個圖像之後：

<p>Nunc et neque risus. Nam a nisl eu magna rutrum euismod ac in lorem. Aenean varius accumsan ligula tincidunt malesuada. In diam lectus, pharetra quis cursus in, egestas vitae tellus. In neque arcu, aliquet ut egestas in, ultrices id ligula. Suspendisse ut dolor ligula, sit amet placerat ligula. Ut viverra nisi id ante facilisis pharetra. Aenean scelerisque, leo eget accumsan condimentum, odio libero ultrices enim, pretium placerat sapien purus nec odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur bibendum viverra pellentesque. Pellentesque eu diam non eros consectetur semper nec sed nisl.</p> 

<p style="text-align: center;"><img class="size-full wp-image-44 aligncenter concept dd-star-rating" alt="concept" src="http://www.mysite.com/wp-content/uploads/2012/12/concept.png" width="720" height="540" /></p> 

<p style="text-align: center;"><img class="size-full wp-image-45 aligncenter concept dd-star-rating" alt="concept" src="http://www.mysite.com/wp-content/uploads/2012/12/concept2.png" width="720" height="540" /></p> 

<p>Nulla eros ante, lobortis in convallis eget, dignissim ut quam. Proin nisi nunc, iaculis ac auctor eu, tincidunt ac augue. Nunc purus nisi, sollicitudin nec luctus ullamcorper, dictum id magna. Sed quis nisi sagittis sapien placerat semper vitae tempus leo. Suspendisse sem diam, eleifend in blandit sed, pellentesque ac nisl. Morbi tincidunt adipiscing augue in pharetra. Duis dapibus bibendum egestas. Phasellus dictum dapibus quam id fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 

因此，對於那些2張圖片，因爲它們包含dd-star-rating類，我希望$content變量的值更改爲：

<p>Nunc et neque risus. Nam a nisl eu magna rutrum euismod ac in lorem. Aenean varius accumsan ligula tincidunt malesuada. In diam lectus, pharetra quis cursus in, egestas vitae tellus. In neque arcu, aliquet ut egestas in, ultrices id ligula. Suspendisse ut dolor ligula, sit amet placerat ligula. Ut viverra nisi id ante facilisis pharetra. Aenean scelerisque, leo eget accumsan condimentum, odio libero ultrices enim, pretium placerat sapien purus nec odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur bibendum viverra pellentesque. Pellentesque eu diam non eros consectetur semper nec sed nisl.</p> 

<p style="text-align: center;"><img class="size-full wp-image-44 aligncenter concept dd-star-rating" alt="concept" src="http://www.mysite.com/wp-content/uploads/2012/12/concept.png" width="720" height="540" /></p> 
<div>Star Rating ID = 44</div> 

<p style="text-align: center;"><img class="size-full wp-image-45 aligncenter concept dd-star-rating" alt="concept" src="http://www.mysite.com/wp-content/uploads/2012/12/concept2.png" width="720" height="540" /></p> 
<div>Star Rating ID = 45</div> 

<p>Nulla eros ante, lobortis in convallis eget, dignissim ut quam. Proin nisi nunc, iaculis ac auctor eu, tincidunt ac augue. Nunc purus nisi, sollicitudin nec luctus ullamcorper, dictum id magna. Sed quis nisi sagittis sapien placerat semper vitae tempus leo. Suspendisse sem diam, eleifend in blandit sed, pellentesque ac nisl. Morbi tincidunt adipiscing augue in pharetra. Duis dapibus bibendum egestas. Phasellus dictum dapibus quam id fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 

現在，這裏是我的代碼，到目前爲止，在我的主題functions.php文件：

add_filter('the_content' , 'dd_wrap_image'); 

function dd_wrap_image ($content) 
{  
    $dom = new DOMDocument; 
    $dom->loadHTML($content); 
    $imgs = $dom->getElementsByTagName('img'); 

    foreach($imgs as $img) 
    { 
     if ($img->hasAttribute('class') && strstr($img->getAttribute('class'), 'dd-star-rating')) 
     {     
      // get the "wp-image-X" ID and store into $id variable 
      // add "<div>Star Rating ID = $id</div>" after image 

      $class_array = explode(' ', $img->getAttribute('class')); 

      foreach ($class_array as $k => $v) 
      { 
       if (strstr($v, 'wp-image')) 
       { 
        $id = end(explode('-', $v)); 
       } 
      } 

      if (!empty($id)) 
      { 
       $img->appendChild("<div>Star Rating ID = $id</div>"); 
      }    
     } 
    } 

    $dom->saveHTML(); 
    return $content; 
} 

正如你所看到的，我需要的條件語句裏面一些幫助。正則表達式最適合用preg_match()來計算ID嗎？在每個圖像之後添加<div>的最佳方法是什麼？使用str_replace()？

編輯：

更新我的代碼。但現在收到錯誤Argument 1 passed to DOMNode::appendChild() must be an instance of DOMNode, string given

再次編輯：

非常感謝hakre！但是，如果我想在每張圖像之後添加如下所示的較大代碼，該怎麼辦？

可以說下面的代碼存儲在一個名爲$star_code的變量中，我將如何在使用DOM的圖像之後插入該代碼？

<div class="dd-star-poll" id="img-$id"> 

    <ul class="dd-star-poll-options"> 
    <li><a href='#' title='1 star out of 5' class='one-star'>1</a></li> 
    <li><a href='#' title='2 stars out of 5' class='two-stars'>2</a></li> 
    <li><a href='#' title='3 stars out of 5' class='three-stars'>3</a></li> 
    <li><a href='#' title='4 stars out of 5' class='four-stars'>4</a></li> 
    <li><a href='#' title='5 stars out of 5' class='five-stars'>5</a></li>  
    </ul> 

    <div class="dd-star-poll-results"> 
    Currently 3.5/5 Stars. 
    </div> 

</div> 

Answer 1

你得到的最後一個問題是，因爲你不通過字符串，而是由一個對象添加新元素<div>。例如：

$class->appendChild(new DOMElement('div', "Star Rating ID = $id")); 

但是我也建議你在你的情況下使用XPath。它確實允許您僅選擇那些具有您要查找的字符串類的img元素。至少與您在PHP代碼中編寫的級別相同。所以你可以省掉一些代碼。

爲例選擇那些匹配的所有屬性，然後解析它們（使用正則表達式），以獲得ID：

$doc = new DOMDocument; 
$doc->loadHTML("<body>$html</body>"); 

$xp = new DOMXPath($doc); 
$images = $xp->query(
    '//img[@class 
      and contains(@class, "dd-star-rating") 
      and contains(@class, "wp-image-") 
     ]/@class' 
); 

foreach ($images as $class) { 
    $id = preg_match('/(?:^|\s)wp-image-(\d+)(?:$|\s)/', $class->nodeValue, $matches) ? $matches[1] : NULL; 
    $class->appendChild(new DOMElement('div', "Star Rating ID = $id")); 
} 

結果：

<p>Nunc et neque risus. Nam a nisl eu magna rutrum euismod ac in lorem. Aenean varius accumsan ligula tincidunt malesuada. In diam lectus, pharetra quis cursus in, egestas vitae tellus. In neque arcu, aliquet ut egestas in, ultrices id ligula. Suspendisse ut dolor ligula, sit amet placerat ligula. Ut viverra nisi id ante facilisis pharetra. Aenean scelerisque, leo eget accumsan condimentum, odio libero ultrices enim, pretium placerat sapien purus nec odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur bibendum viverra pellentesque. Pellentesque eu diam non eros consectetur semper nec sed nisl.</p> 

<p style="text-align: center;"><img class="size-full wp-image-44 aligncenter concept dd-star-rating" alt="concept" src="http://www.mysite.com/wp-content/uploads/2012/12/concept.png" width="720" height="540"></p> 
<div>Star Rating ID = 44</div> 

<p style="text-align: center;"><img class="size-full wp-image-45 aligncenter concept dd-star-rating" alt="concept" src="http://www.mysite.com/wp-content/uploads/2012/12/concept2.png" width="720" height="540"></p> 
<div>Star Rating ID = 45</div> 

<p>Nulla eros ante, lobortis in convallis eget, dignissim ut quam. Proin nisi nunc, iaculis ac auctor eu, tincidunt ac augue. Nunc purus nisi, sollicitudin nec luctus ullamcorper, dictum id magna. Sed quis nisi sagittis sapien placerat semper vitae tempus leo. Suspendisse sem diam, eleifend in blandit sed, pellentesque ac nisl. Morbi tincidunt adipiscing augue in pharetra. Duis dapibus bibendum egestas. Phasellus dictum dapibus quam id fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 

---

添加更多的元件作品通過與DOMElelemnt::appendChild的返回值一起工作。例如：

$prefix = 'dd-star-poll'; 

$divOuter = $node->appendChild(new DOMElement('div')); 
$divOuter->setAttribute('class', $prefix); 
$divOuter->setAttribute('id', "img-$id"); 

$ul = $divOuter->appendChild(new DOMElement('ul')); 
$ul->setAttribute('class', "$prefix-options"); 

... 

您只是繼續添加元素。