如何在新行上使用内部div拆分或获取div的内容

Question

I have this code:

 <div id="nlp_selected_day"> <div class="nlp_months nlp_selected_month_calendar_shown" style="display: inline-block;"><div class="nlp_day_selected_dummy_day"></div> <div class="nlp_day_selected_dummy_day"></div> <div class="nlp_day_selected_dummy_day"></div> <div id="1" class="nlp_day_selected nlp_thursday" value="1" title="Четвъртък"> 1 <div></div></div> <div id="2" class="nlp_day_selected nlp_friday" value="2" title="Петък"> 2 <div class="calendar_day_container"></div></div> ...... <div id="5" class="nlp_day_selected nlp_monday" value="5" title="Понеделник"> 5 <div class="calendar_day_container"> <div>8:00 - 8:45 </div> <div class="hidden_info"> <div class="hidden_title">Запазено!</div> <div class="hidden_description"><br></div> </div> <div>8:45 - 9:30 </div> <div class="hidden_info"> <div class="hidden_title">Запазено!</div> <div class="hidden_description"><br></div> </div> <div>9:40 - 10:25 </div> <div class="hidden_info"> <div class="hidden_title">Запазено!</div> <div class="hidden_description"><br></div> </div> <div>10:25 - 11:10 </div> <div class="hidden_info"> <div class="hidden_title">Запазено!</div> <div class="hidden_description"><br></div> </div> <div>11:20 - 12:05 </div> ....... <div id="6" class="nlp_day_selected nlp_tuesday" value="6" title="Вторник"> 6 <div class="calendar_day_container"> <div>8:00 - 8:45 </div> <div class="hidden_info"> <div class="hidden_title">Запазено!</div> <div class="hidden_description"><br></div> </div> <div>8:45 - 9:30 </div> <div class="hidden_info"> <div class="hidden_title">Запазено!</div> <div class="hidden_description"><br></div> ...... 

I get content with this code:

 jQuery('.nlp_day_selected').click(function (){ var contents = $(this).children('.calendar_day_container').text(); $('#nlp_show_content').html(contents); }); 

but I want to get content divided into a new line each time block

something like this:

14:40 - 15:25 100 минути descriptions

15:25 - 16:10 title descriptions

16:20 - 17:05 title descriptions

Answer 1

While I believe your question could have been phrased better, I will still make an attempt to answer your question.

First of all, it could be your formatting, but I think you have some </div> tags that have no opening <div> tags, you should check to see if that is an actual error or not (you might have copy pasted wrong who knows).

Furthermore, I think you should make a few small changes to your code to make it a bit easier to get at the data you want.

You should change all code that looks like this:

<div>10:25 - 11:10 </div>
   <div class="hidden_info">
   <div class="hidden_title">Запазено!</div>
   <div class="hidden_description"><br></div>

To something like this:

<div class="timeslot_container">   
   <div class="timeslot">10:25 - 11:10 </div>
   <div class="hidden_info">
   <div class="hidden_title">Запазено!</div>
   <div class="hidden_description"><br></div>
</div>

And then, you can do something like this using jQuery (modify it to fit your needs):

var contents = $("<div></div>");
$('.calendar_day_container').each(function (i, elt) {
    var $htmlForOneDay = $("<div></div>");
    $(elt).find(".timeslot_container").each(function (i, elt) {
        var $singleTimeslot = $("<div></div>");
        $singleTimeslot.append($(elt).find(".timeslot").text()).append(" ");
        $singleTimeslot.append($(elt).find(".hidden_title").text()).append(" ");
        $singleTimeslot.append($(elt).find(".hidden_description").text());
        $htmlForOneDay.append($singleTimeslot).append($("<br/>"));
    });
    contents.append($htmlForOneDay).append("<hr/>"); // you can skip the <hr/> if you want
});
$('#nlp_show_content').html(contents[0]);

I believe this will get you the data in the format you want, or at least lead you in the right direction, I hope this helps you :)

Answer 2

Loop over all of the hidden_info class and use those instances to create each line:

jQuery('.nlp_day_selected').click(function () {
    var htmlString = '';
    var $hidden = $(this).find('.hidden_info');
    $hidden.each(function () {
        var $el = $(this),
            time = $el.prev().text(),// time is in previous element
            title = $el.find('.hidden_title').text(),// title is a child
            description = $el.find('.hidden_description').text();// description is a child

        htmlString += time + ' ' + title + ' ' + description + '<br>';
    });    

    $('#nlp_show_content').html(htmlString);
});

Not you have full control over each line spacing and formatting