2013-08-19 2 views
5

저는 꽤 오랫동안이 작업을 해왔고 이미지 태그 다음에 링크와 스팬으로 이미지를 래핑했습니다.PHP DOM 이미지를 링크로 감싸고 이미지 태그 앞에 스팬을 추가하십시오.

<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

그뿐만 아니라 내가 얻은 최상의 결과는 이미지가 span 태그 내에 놓이는 것입니다. –

+0

doctype은 무엇입니까? – Sumurai8

+0

0

음. 이것이 대답으로 분류되지 않을 수도 있지만, 당신은 이미 그것을 가지고 계십니까? 제 말은 ..소스 데이터로이 (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> 

그리고 그 결과는 이것이다 : '.. ISN

<!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> 

그래서를 그게 니가 원하는거야? : D

관련 문제