0

解決方法がわからない問題に遭遇しました。<h2>および<p>タグの各グループを含むタグでラップする必要があります<article>。

私の現在のHTMLは次のようになります。

<h2 category="someCategory">
<p>text text text<p>

<h2 category="anotherCategory">
<p>text text text<p>
<p>text text text<p>

次のようにするには、javascript を使用する必要があります。

 <article>
   <h2 category="someCategory">
   <p>text text text<p>
 </article>

<article>    
  <h2 category="anotherCategory">
  <p>text text text<p>
  <p>text text text<p>
</article>

どういうわけか、JavaScript は、それぞれの新しい<h2>タグが新しい article 要素の始まりであることを理解する必要があります。そして、それと<p>次のタグの前の最後のタグ<h2>が記事の終わりになります。(全体像は、マークダウン ドキュメントを解析しており<article>、レイアウト用の CSS フックとしてタグが必要であるということです。)

この問題を解決する方法がわからないので、助けていただければ幸いです!!

  • d13

更新: ありがとう!! 私は両方の答えを試しましたが、どちらも完全に機能します!

4

1 に答える 1

1

これにより、古い HTML タグも削除されます。

    var articles = [], article, sibling, toDelete = [];
    var h2s = document.getElementsByTagName("H2");

    for(var i = 0, h2; h2 = h2s[i++];){
        article = document.createElement("article");
        sibling = h2.nextElementSibling;

        article.appendChild(h2.cloneNode(true));

        while(sibling && sibling.tagName !== "H2"){

            if(sibling.tagName === "P"){
                article.appendChild(sibling.cloneNode(true));
                toDelete.push(sibling);
            }

            sibling = sibling.nextElementSibling;
        }

        articles.push(article);
    }

    while(toDelete.length > 0){
        toDelete[toDelete.length-1].parentNode.removeChild(toDelete[toDelete.length-1]);
        toDelete.pop();
    }

    while(h2s.length > 0){
        h2s[0].parentNode.removeChild(h2s[0]);
    }

    for(i = 0, article; article = articles[i++];){
        document.body.appendChild(article);
    }
于 2013-09-24T05:12:22.327 に答える