web-dev-qa-db-ja.com

Javascript Solution特定のタグを削除し、残りを特定のDIVに残す

このようなdiv構造があります。

<div class="gallery_lightview">
    <div id="lg_image">
        <a href="http://www.website.com/?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" class="lightview_main" title="TITLE HERE">
            <img class="alignnone" src="HEADER.jpg" alt="" />
        </a>
        <a class="lightview" rel="prettyPhoto[pp_gal]" href="http://pathTophoto.jpg"> </a>
    </div>
</div>

これはWordpress Adminで投稿用に行われ、私が使用するときに表示されます。

<p><?php the_content(); ?></p>

私がやりたいことは、divクラス "gallery_lightview"の間にのみ現れる<a>タグを削除し、<img>タグを残すことです。それで、すべてが取り除かれるとそれは次のようになります...

<div class="gallery_lightview">
    <div id="lg_image">
        <img class="alignnone" src="HEADER.jpg" alt="" />
    </div>
</div>

基本的にこれをクリック不可能な画像にする。これは可能ですか？これはモバイルサイトで行われているので、これをヘッダーに含めることは望ましくありません。本当にそれが"the_content" Wordpress呼び出しの上にある自己完結型のJavascriptであることを望んでいました（"gallery_lightview" divコードがあるところです）。

私はjQueryを使用しないことを選択しました。なぜなら、そのモバイルのために負荷が増えるからです。そして文字通り、ライブラリがする唯一のことは<a>タグを削除することでした。

何か案は？

私はJavascriptが.phpページテンプレート内にあることを望んでいたので、私はすべての単一の投稿に入り、Javascriptも追加する必要はありませんでした。これは可能ですか？

加算

私は基本的に "<a>"内のgallery_lightviewタグを無効にして "img"タグだけを残して表示するようにしたい

customizationjavascriptpage-templatecontentmobile
1
Matt
<script type="text/javascript">
function removeLink() {
    theAs = document.getElementById('lg_image').childNodes; // get all children of div#lg_image

    for( i = 0; i < theAs.length; i++ ) { // loop through the children
        if( theAs[i].nodeType != 3 ) { // if the child is not a whitespace,
            theImg = theAs[i].innerHTML; // it is the a which contains the img, so save its content
            break;
        }
    }

    document.getElementById('lg_image').innerHTML = theImg; // set the img as content of div#lg_imagei
}

function addEvent(obj, evType, fn) { 
    if (obj.addEventListener) { 
        obj.addEventListener(evType, fn, false); 
        return true; 
    } else if (obj.attachEvent) { 
        var r = obj.attachEvent("on"+evType, fn); 
        return r; 
    } else { 
        return false; 
    } 
}

addEvent(window, 'load', removeLink);
</script>
1
sorich87

テストしていませんが、試してみてください。


var cnt = $(".lightview_main").contents()
$(".lightview_main").replaceWith(cnt);
$("a.lightview").remove();
0
Pippin