使用jquerys nextUntil存储一系列时间并显示电视节目

2023年3月29日 173次阅读

我有一个我想要抓取的页面,其格式如下：

<ul>
<li>7 pm</li>
<li>8 pm</li>
<ul>

<h6 id="7 pm">7 pm</h6>
<div class="show">My TV Show #1</div>
<div class="show">My TV Show #2</div>
<div class="show">My TV Show #3</div>
<h6 id="8 pm">8 pm</h6>

如何让它显示时间,然后显示那段时间的所有节目？

我已经尝试将时间存储在任何数组中,但是当涉及到实际使用数组时,我会陷入困境.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>jQuery PHP Page Scape</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
        $("document").ready(function() {
            var times = new Array();

            $.ajax({
                url: "curl.php",
                dataType: 'text',
                success: function(data) {
                    $(data).find('.wnt-top-r ul li').each(function(i, item) {
                        times.push($(item).text());
                        $('#content').append(times[i]);
                    });
                }
            });
        });
    </script>
</head>
<body>

    <div id="content"></div>

</body>
</html>

谢谢,
布赖恩

最佳答案 更改标记.对于布局的完成方式,这是不可能/优化的.

首先,有效的HTML ID名称必须以字母开头.

其次,只能有1个相同的ID,没有重复.

第三,空格不是ID名称中的有效字符.

由于您的标记无效,这是一个建议.

<div id="container">
    <ul>
        <li data-showtime="19">7pm</li>
        <li data-showtime="20">8pm</li>
        <li data-showtime="21">9pm</li>
    </ul>

    <h6 class="time-title time-19" data-showtime="19">7pm</h6>
    <div class="show time-19">My TV Show 1</div>
    <div class="show time-19">My TV Show 2</div>
    <div class="show time-19">My TV Show 3</div>
    <div class="show time-19">My TV Show 4</div>
    <div class="show time-19">My TV Show 5</div>
    <h6 class="time-title time-20" data-showtime="20">8pm</h6>
    <div class="show time-20">My TV Show 5</div>
    <div class="show time-20">My TV Show 6</div>
</div>

和脚本：

  $(function() {
        showtime = {};
        $("#container").find("h6.time-title").each(function() {
            var t = $(this);
            var d = t.data();
            showtime[d.showtime] = {};
            showtime[d.showtime]['caption'] = t.text();

            var tempshows = [];
            $(".show.time-"+d.showtime).each(function() {
                showname = $(this).text();
                tempshows.push(showname)
            })

            showtime[d.showtime]['shows'] = tempshows;
        })

console.log(showtime);

    })
​

jsFiddle：http://jsfiddle.net/FhKAh/1/

如果您无法更改标记并且必须处理此问题,请尝试以下操作：

showtime = {};
$("h6").each(function() {
    h6 = $(this);

    var tempshow = [];
    h6.nextUntil("h6").each(function() {
        tempshow.push($(this).text())
    });


    showtime[h6.text()] = {};
    showtime[h6.text()]['shows'] = tempshow;


});

    console.log(showtime);

jsFiddle：http://jsfiddle.net/CGyBK/

点赞