Javascript Question

how to split or get contents of div with inner div separate on new line

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

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

Comments