[英]How to fix code PHP DOM HTML Parse - Loop
我有一些麻烦:
<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>
$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++;
}
-http://link.com
-类别
-http://link.com/img.png
-第1段
-第2段
-quot
-http://link2.com
-category2
-http://link2.com/img.png
-第12段
-第22段
-quot2
使用模板工具jQuery和Mustache js的方法如下。
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>
这是您想要实现的目标吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.