How to fix code PHP DOM HTML Parse - Loop

Question

I started to play building a PHP HTML Parser,

and I have some trouble:

The HTML code is as follows:

<div class="list">
<div class="b">
 <div class="c">
  <a href="http://link.com">
   <div class="d">Category</div>
   <div class="e">
    <img src="https://link.com/img.png">
   </div>
   <h1>TITLE</h1>
   <div class="f">paragraph 1</div>
   <div class="g">paragraph 2</div>
   <div class="h">
    <div class="i">
     <div class="j">Quot</div>
    </div>
   </div>
  </a>
 </div>
</div>
<div class="b">
 <div class="c">
  <a href="http://link2.com">
   <div class="d">Category2</div>
   <div class="e">
    <img src="https://link2.com/img.png">
   </div>
   <h1>TITLE 2</h1>
   <div class="f">paragraph 12</div>
   <div class="g">paragraph 22</div>
   <div class="h">
    <div class="i">
     <div class="j">Quot 2</div>
    </div>
   </div>
  </a>
 </div>
</div>

My PHP Code:

$classname = "list";
$xPath = new DomXPath($dom);
$find = $xPath->query("//* 
[contains(@class, '$classname')]");
$get = $find->item(0);
$link = $get->getElementsByTagName('a');
$data = array();

foreach ($link as $val)
{ $data[] = array(
'link' => $link->item($no)
->getAttribute('href'),

 );

$no++; 
} 

I want the results like this:

- http://link.com
-category
- http://link.com/img.png
-paragraph 1
-paragraph 2
-quot

- http://link2.com
-category2
- http://link2.com/img.png
-paragraph 12
-paragraph 22
-quot2

Answer 1

Here is how you could do it using jQuery and Mustache js a templating tool.

https://jsfiddle.net/mcroteau/zyouxfq4/

<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="Mustache.js"></script>

<script type="text/javascript">
var row = `
    <div class="content-row">
        <div class="link">
            <a href="{{link}}" title="{{category}}">{{link}}</a>
        </div>
        <h1>{{category}}</h1>
        <img src="{{image}}" style="border:solid 1px #ddd; height:20px; width:20px;"/><br/>
        <p>{{paragraphOne}}</p>
        <p>{{paragraphTwo}}</p>
        <p>{{quote}}</p>
    </div>
    <hr/>`;

$(document).ready(function(){
    var $mainContentDiv = $(".list")
    var $mainList = $(".b");

    $mainList.each(function(){
        var data = {}
        var content = $(this).find(".c")
        var $content = $(content)

        var link = getLink($content)
        var category = getCategory($content)
        var image = getImage($content)
        var paragraphOne = getParagraph($content, 'f')
        var paragraphTwo = getParagraph($content, 'g')
        var quote = getQuote($content)

        data["link"] = link
        data["category"] = category
        data["image"] = image
        data["paragraphOne"] = paragraphOne
        data["paragraphTwo"] = paragraphTwo
        data["quote"] = quote

        var html = Mustache.to_html(row, data);
        $('#links-container').append(html);

    })

    function getQuote($content){
        return $content.find(".j").html()
    }

    function getParagraph($content, className){
        return $content.find("." + className).html()
    }

    function getImage($content){
        return $content.find("e").find("img").attr("src")
    }

    function getCategory($content){
        var category = $content.find(".d")
        return $(category).html()
    }

    function getLink($content){
        return $content.find("a").attr("href")
    }


    $mainContentDiv.remove()

})
</script>

Is this something like you wanted to achieve?