CODEWITHSUNDEEP
jqueryhtmlhtml-lists
Andres
Andres

Reputation: 2023

Get UL list content with jquery

I need to get content from a UL list and then be able to use that to email. But I'm stuck on getting the ul list in jquery. I've searched and found the following:

$(document).ready(function(){
    $("#send").click(function() { //When trigger is clicked...
            var optionTexts = [];
            $("#thelist").each(function() { optionTexts.push($(this).text()) });
            var text = '"' + optionTexts.join('"<br/> "') + '"';

            $("#result").append(text);

        });
    });

but this returns all contents inside the page :S Here's my ul list:

<ul id="thelist">
  <li style="height: 65px; display: list-item; ">
    <ul>
      <li class="botHeader">
        "Evelin dice"
                <span>14:37:52</span>
      </li>
      <li class="botMsg">
        "Hola, bienvenido"
      </li>
    <ul>
  </li>
  <li style="height: 26px; display: list-item; ">
    <ul>
      <li class="userHeader">
        "Usted dice"
                <span>14:37:59</span>
      </li>
      <li class="userMsg">
        "Hola como estas"
      </li>
    <ul>
  </li>
  <li style="height: 39px; display: list-item; ">
    <ul>
      <li class="botHeader">
        "Evelin dice"
                <span>14:37:59</span>
      </li>
      <li class="botMsg">
        "Gracias por preguntar, todo bien"
      </li>
    <ul>
  </li>
</ul>

<a href="#" id="send">enviar</a>
<div id="result">

</div>

Upvotes: 1

Views: 12014

Answers (3)

Alnitak
Alnitak

Reputation: 339786

This should do the whole lot in one go, and without any temporary variables:

$('#result').append(
    $('#thelist').find('li').filter(function() {
        return $(this).find('ul').length === 0;
    }).map(function(i, e) {
        return $(this).text();
    }).get().join('<br/>')
);

You have to only consider the <li> elements that don't have any <ul> descendents.

Working demo at http://jsfiddle.net/alnitak/JVS7d/

Upvotes: 4

sesser
sesser

Reputation: 1165

First, you're markup is invalid. You're missing the closing </ul> on your inner lists. Second, you just need to add li to your selector for your $.each(...) function.

$(document).ready(function(){
    $("#send").click(function() { //When trigger is clicked...
        var optionTexts = [];
        $("#thelist li").each(function() { optionTexts.push($(this).text()) });
        var text = '"' + optionTexts.join('"<br/> "') + '"';

        $("#result").append(text);
    });
});

Upvotes: 1

Rodolfo
Rodolfo

Reputation: 4183

looks to me you should change the $("#thelist").each(function... to $("#thelist ul li").each(function...

Upvotes: 0

Related Questions