All geek questions in one place

Storing an array of times and displaying a TV show using jquerys nextUntil

I have a page that I want to clear, which has the following format:

<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>

how can i get it to display the time and then the whole show for that time?

I tried to save time in any array with success, but I get stuck when it comes to the fact that it does something with the array once.

 <!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>

Thanks Brian

+4
source share
1 answer

Change the layout. This is not possible / optimized for how your layout is executed.

First, the correct HTML name must begin with a letter.

Secondly, there can be only one identifier, without duplicates.

Thirdly, the space is not a valid character in the ID name.

Since your markup is invalid, here is a suggestion.

 <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>

and script:

  $(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/

If you cannot change the markup and you have to deal with it, try the following:

 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/

+2
source

Source: https://habr.com/ru/post/1433099/

More articles:


All Articles