2013-08-19 3 views
5

私はかなり長い間これをしてきました。イメージタグのあとのリンクとスパンでイメージをラップしています:PHPドーム画像をリンクでラップしてイメージタグの前にスパンを追加

<a href=""> 
    <img src=""> 
    <span></span> 
</a> 

しかし、私が欲しいワットは、次のとおりです。私はアルvariatonsの種類と

$img->parentNode->appendChild($dom->createElement('span'), $img); 

の位置とinsertBeforの使用を試みた

<a href=""> 
    <span></span> 
    <img src=""> 
</a> 

私のコードのすべての種類の場所でe()を使うことができます。私はphp DOMのことがかなり新しいので、アイデアはまったくありません。マイソース:

foreach($dom->getElementsByTagName('img') as $img) 
{ 
$fancyHref = $dom->createElement('a'); 

         $clone = $fancyHref->cloneNode(); 
         $img->parentNode->replaceChild($clone, $img); 
         $clone->appendChild($img); 
         $img->parentNode->appendChild($dom->createElement('span')); 
}; 

更新: が私の目標を明確にする:私は、HTMLのimgタグを持っています。

<img src="" /> 

<a href=""> 
    <span class=""></span> 
    <img src="" /> 
</a> 

前に:それはPHPのDOMを通過した後、私は、画像タグの前にspanタグとタグに包まれたimgタグをしたいですこれを行うための現時点のコード(スパンなし)

foreach($dom->getElementsByTagName('img') as $img) 
      {    
       $src = $img->getAttribute('src'); 
       $filename = substr(strrchr($src , '/') ,1); 
       $filename = preg_replace('/^[.]*/', '', $filename); 
       $filename = explode('.', $filename); 
       $filename = $filename[0]; 

       if($this->imagesTitles[$this->currentLanguage][$filename] !== '') 
       { 
        $img->setAttribute('title', $this->imagesTitles[$this->currentLanguage][$filename]); 
        $img->setAttribute('alt', $this->imagesTitles[$this->currentLanguage][$filename]); 
       } 
       else 
       { 
        $img->removeAttribute('title'); 
        $img->removeAttribute('alt'); 
       } 

       $classes = explode(' ', $img->getAttribute('class')); 
       if(!in_array('no-enlarge', $classes)) 
       { 
        $fancyHref = $dom->createElement('a'); 
        $span = $dom->createElement('span'); 
        $span->setAttribute('class', 'magnifier'); 
        $fancyHref->setAttribute('class', 'enlarge'); 
        $fancyHref->setAttribute('rel', 'enlarge'); 
        $fancyHref->setAttribute('href', $img->getAttribute('src')); 
        if($img->getAttribute('title') !== '') 
        { 
         $fancyHref->setAttribute('title', $img->getAttribute('title')); 
         $fancyHref->setAttribute('alt', $img->getAttribute('title')); 
        } 
        $clone = $fancyHref->cloneNode(); 

        $img->parentNode->replaceChild($clone, $img); 
        $clone->appendChild($img); 
        $img->parentNode->insertBefore($span, $img);       
       } 

       $img->setAttribute('class', trim(str_replace('no-enlarge', '', $img->getAttribute('class')))); 

       if($img->getAttribute('class') === '') 
       { 
        $img->removeAttribute('class'); 
       } 
      } 
+0

「parentNode」のこれらの関数はどこにありますか? –

+0

物事をまっすぐにするには、すでにイメージがあり、前にスパンを入れたいのですか? – Itay

+0

はい。 HTMLにイメージタグがあります。私がしたいことは、その周りにaをラップし、その前にspanタグを配置することです。私は自分が望むものを説明するために質問を更新しました。 –

答えて

1

DOMNode->insertBefore()メソッド(docs)を使用できます。フォームは$parentNode->insertBefore($nodeToBeInserted, $nodeToInsertBefore)です。あなたのコードは次のようになります。

$img->parentNode->insertBefore($dom->createElement('span'), $img); 

DOMNode->appendChild()docs)のみ1つの引数(挿入ノード)を有し、このノードは、常に最後childNodeが後に挿入されます。

編集:

私は今、自分のコードをテストしてみた、そして、あなたのテストケースでは私のラインで$img->parentNode->appendChild($dom->createElement('span'));を置き換えるならば、それは正しい形式で終わるでしょう。しかし、あなたは非常に混乱した方法で要素を操作しています。それ以外に、私があなたの更新されたコードをテストすると、私はあなたの望む形式で終わるか、またはスパン要素なしで終わるでしょう...

置き換えたい要素は、もともとは文書の中にあります。したがって、要素をクローン化する必要があります。現在のコードでは階層エラーが解消されますが、競合する要素だけでなく、変更されたコードをすべてコピーしているため、メモリと時間が浪費されます。競合する要素をコピーすると簡単です。要素を表示する順序で要素に追加します。イメージを追加するときは、代わりにクローンを追加します。 $imgを操作しないでください。イメージを操作する必要がある場合は、代わりにクローンを操作する必要があります。次に、$imgを操作した要素(あなたの場合は$fancyHref)で置き換えます。

$html = '<img src="">'; 
$dom = new DOMDocument(); 
$dom->loadHTML($html); 

foreach($dom->getElementsByTagName('img') as $img) { 
    $fancyHref = $dom->createElement('a'); 
    $clone = $img->cloneNode(); 
    $span = $dom->createElement('span'); 
    #... do whatever you need to do to this span, the clone and the a element ... 

    #... when you are done, you can simply append all elements you have been manipulating ... 
    $fancyHref->appendChild($span); 
    $fancyHref->appendChild($clone); 

    $img->parentNode->replaceChild($fancyHref, $img); 
}; 

echo $dom->saveHTML(); 
+0

同様に、私が得た最良の結果は、画像がスパンタグ内に置かれていることです。 –

+0

doctypeはありますか? – Sumurai8

+0

<!DOCTYPE html> –

0

umm。私はこれが答えとして分類されないかもしれないことを知っているが、あなたはそれを持っていないのですか?私は..この(Data.HTMLに)元データとしてでは

$dom = new DOMDocument; 
$dom->loadHTMLFile("data.html"); 

foreach($dom->getElementsByTagName('img') as $img){ 
    $src = $img->getAttribute('src'); 

    $filename = substr(strrchr($src , '/') ,1); 
    $filename = preg_replace('/^[.]*/', '', $filename); 
    $filename = explode('.', $filename); 
    $filename = $filename[0]; 

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

    if(!in_array('no-enlarge', $classes)) 
    { 
     $fancyHref = $dom->createElement('a'); 
     $span = $dom->createElement('span'); 
     $span->setAttribute('class', 'magnifier'); 
     $fancyHref->setAttribute('class', 'enlarge'); 
     $fancyHref->setAttribute('rel', 'enlarge'); 
     $fancyHref->setAttribute('href', $img->getAttribute('src')); 
     if($img->getAttribute('title') !== '') 
     { 
      $fancyHref->setAttribute('title', $img->getAttribute('title')); 
      $fancyHref->setAttribute('alt', $img->getAttribute('title')); 
     } 
     $clone = $fancyHref->cloneNode(); 

     $img->parentNode->replaceChild($clone, $img); 
     $clone->appendChild($img); 
     $img->parentNode->insertBefore($span, $img); 
    } 

    $img->setAttribute('class', trim(str_replace('no-enlarge', '', $img->getAttribute('class')))); 

    if($img->getAttribute('class') === ''){ 
     $img->removeAttribute('class'); 
    } 
} 

echo "<pre>" . htmlentities($dom->saveHTML()) . "</pre>"; 

:私はあなたのコードを試してみました

<!doctype html> 
<html> 
    <head> 
    </head> 
    <body> 
     <img src="http://lorempixel.com/g/400/200/" alt="alts" title="tits"> 
    </body> 
</html> 

、結果はこれです:

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
     <a class="enlarge" rel="enlarge" href="http://lorempixel.com/g/400/200/" title="tits" alt="tits"> 
      <span class="magnifier"> 
      </span> 
      <img src="http://lorempixel.com/g/400/200/" alt="alts" title="tits"></a> 
    </body> 
</html> 

..だからIsnと」あなたが欲しいものは何ですか? :D

関連する問題