代码之家  ›  专栏  ›  技术社区  ›  user2469520

修改DOM以设置顺序标题的样式

  •  0
  • user2469520  · 技术社区  · 9 年前

    让我们从我的数据库表中的这个html开始:

    <section id="love">
    <h2 class="h2Article">III. Love</h2>
    <div class="divArticle">
    

    这是我通过DOM脚本运行后显示的样子:

    <section id="love"><h2 class="h2Article" id="a3" data-toggle="collapse" data-target="#b3">III. Love</h2>
    <div class="divArticle collapse in article" id="b3">
    

    这就是我想要的样子:

    <section id="love"><h2 class="h2Article" id="a3" data- toggle="collapse" data-target="#b3">
        <span class="Article label label-primary">
            <i class="only-collapsed fa fa-chevron-down"></i>
            <i class="only-expanded fa fa-remove"></i> III. Love</span></h2>
    <div class="divArticle collapse in article" id="b3">
    

    换句话说,DOM为它提供了必要的功能,正确地按顺序对每个id进行编号。缺少的只是款式:

    <span class="Article"><span class="label label-primary"><i class="only- collapsed fa fa-chevron-down"></i><i class="only-expanded fa fa-remove"> </i> III. Love</span></span>
    

    有人能告诉我如何添加这种样式吗?当然,标题也会改变(例如,《三.爱》、《四.恨》等)。我在下面发布了我的DOM脚本:

    $i = 1; // initialize counter
    $dom = new DOMDocument;
    @$dom->loadHTML($Content); // load the markup
    $sections = $dom->getElementsByTagName('section'); // get all section tags
        foreach($sections as $section) { // for each section tag
    
            // get div inside each section
            foreach($section->getElementsByTagName('h2') as $h2) {
                if($h2->getAttribute('class') == 'h2Article') { // if this div has class maindiv
                    $h2->setAttribute('id', 'a' . $i); // set id for div tag
                    $h2->setAttribute('data-target', '#b' . $i);
                }
            }
    
            foreach($section->getElementsByTagName('div') as $div) {
                if($div->getAttribute('class') == 'divArticle') { // if this div has class divArticle
                    $div->setAttribute('id', 'b' . $i); // set id for div tag
                }
    
                if($div->getAttribute('class') == 'divClose') { // if this div has class maindiv
                    $div->setAttribute('data-target', '#b' . $i); // set id for div tag
                }
            }
            $i++; // increment counter
        }
    
    // back to string again, get all contents inside body
    $Content = '';
    foreach($dom->getElementsByTagName('body')->item(0)->childNodes as $child) {
        $Content .= $dom->saveHTML($child); // convert to string and append to the container
    }
    
    $Content = str_replace('data-target', 'data-toggle="collapse" data-target', $Content);
    $Content = str_replace('<div class="divArticle', '<div class="divArticle collapse in article', $Content);
    
    2 回复  |  直到 9 年前
        1
  •  0
  •   hostingutilities.com    9 年前

    由于在本例中使用的是DOM文档对象,因此可以使用createElement函数添加HTML。

    看见 http://php.net/manual/en/domdocument.createelement.php

    从附页的文件中窃取

    <?php
    
    $dom = new DOMDocument('1.0', 'utf-8');
    
    $element = $dom->createElement('test', 'This is the root element!');
    
    // We insert the new element as root (child of the document)
    $dom->appendChild($element);
    
    echo $dom->saveXML();
    ?>
    

    将输出

    <?xml version="1.0" encoding="utf-8"?>
    <test>This is the root element!</test>
    

    如果没有DOM对象,您通常会通过以下方式之一添加PHP。

    1.

    echo "<div>this method is often used for shorter pieces of HTML</div>";
    

    2.

    ?> <div> You can also escape out of HTML and then "turn" PHP back on like this </div> <?php
    

    第一种方法使用echo命令输出一个HTML字符串。第二种方法使用
    ?> escape标记,告诉计算机开始将所有内容视为HTML,直到看到另一个打开 <?php PHP标签。

    因此,通常在PHP文件中,您可以像这样添加HTML。

    ?> 
       <span class="Article">
           <span class="label label-primary">
               <i class="only- collapsed fa fa-chevron-down"></i>
               <i class="only-expanded fa fa-remove"></i> 
               III. Love
           </span>
        </span>
    <?php
    

    但因为在这种情况下,我们试图编辑来自数据库内部的内容,所以我们无法做到这一点。

        2
  •  0
  •   user2469520 user2469520    9 年前

    好吧,我想显而易见的解决方案是将标题包装在可以用简单的str_replace修改的内容中。。。

    <h2><span class="Answer">IIII. Love</span></h2>
    

    甚至这个。。。

    <h2>[]III. Love[]</h2>
    

    有点像米老鼠,但它能完成任务。我只需要在每篇文章的每个标题中写出或粘贴所有这些代码。我宁愿尽可能地自动化它。