Looping through .find() results and gathering .text()

Question

I've got the following code:

jQuery

$("li").click(function(){
  $(this).toggleClass("selected");
  $(".selected").each(function(){
    $(".items").append(this.text() + ", ");
  });
});

html

<ul class='category'>
  <h4>Category</h4>
  <a href="#"><li class="selected">Link 1</li></a>
  <a href="#"><li>Link 2</li></a>
  <a href="#"><li>Link 3</li></a>
  <a href="#"><li class="selected">Link 4</li></a>
  <a href="#"><li class="selected">Link 5</li></a>
  <a href="#"><li>Link 6</li></a>
  <a href="#"><li>Link 7</li></a>
</ul>

<span class="items">Selected Items Appear Here</span>

I'm trying to search the contents of the $(".category") for tags with the .selected class before appending the results to another div.

This is the result I'm hoping for:

<span class="items">Link 1, Link 4, Link 5</span>

However, the this.text() seems to be returning an undefined error.
Any clue as to what I'm doing wrong?

Bill · Accepted Answer · 2014-11-30T06:58:19.343

5

You need to call .text() on a jQuery object, and since this refers to the element (see jQuery docs for .each()), simply wrap this in $() to make a new jQuery object of the current element in the loop.

example:

$(".items").append($(this).text() + ", ");

in saying this, you'd probably be better off simply using .innerHTML unless you want the jQuery object for other reasons.

example:

$(".items").append(this.innerHTML + ", ");

edited Nov 30 '14 at 06:58

answered Nov 30 '14 at 06:53

Bill

3,478
23
42

I can't believe I missed that, Thanks @Billy! – User K Nov 30 '14 at 06:57

score 1 · Answer 2 · answered Nov 30 '14 at 07:01

You can try something like

var $lis = $(".category li").click(function() {
  //toggle the current li's selected class
  $(this).toggleClass("selected");
  setItems();
});
//set the initial value
setItems();

function setItems() {
  //get the texts of all selected `li`'s text to an array
  var texts = $lis.filter(".selected").map(function() {
    return $(this).text();
  }).get();
  //set the array values to the `.items` element
  $('.items').text(texts.join())
}

.selected {
  background-color: lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h4>Category</h4>
<ul class='category'>
  <li class="selected"><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li class="selected"><a href="#">Link 4</a></li>
  <li class="selected"><a href="#">Link 5</a></li>
  <li><a href="#">Link 6</a></li>
  <li><a href="#">Link 7</a></li>
</ul>

<span class="items">Selected Items Appear Here</span>

This was very useful, Thanks a bunch Arun P Johny! – User K Nov 30 '14 at 07:05 — User K, Nov 30 '14 at 07:05

score 1 · Answer 3 · answered Nov 30 '14 at 07:23

js fiddle example for you

**Jquery**
  $(function () {
        $("li").click(function () {
            $(this).toggleClass("selected");
            appendItems();
        });

        function appendItems() {
            var selecteditem = "", lement, appementElement = ", ";
            lement = $(".selected").size();
            $(".selected").each(function (index) {
                if ((lement - 1) == index) {
                    appementElement = "";
                }
                selecteditem = selecteditem + ($(this).text() + appementElement);
            });
            $(".items").html("").append(selecteditem);
        }
    });

html

<ul class='category'>
        <h4>
            Category</h4>
        <a href="#"><li class="selected">Link 1</li></a>
        <a href="#"><li>Link 2</li></a>
        <a href="#"><li>Link 3</li></a>
        <a href="#"><li class="selected">Link 4</li></a> 
        <a href="#"><li class="selected">Link 5</li></a> 
        <a href="#"><li>Link 6</li></a>
        <a href="#"><li>Link 7</li></a>
   </ul>
    <h3>
        <span class="items"></span>
    </h3>

i hope this may hep you

score -1 · Answer 4 · edited May 23 '17 at 11:57

I think you confused Javascript's this with jQuery's $(this). $() is the jQuery constructor function. this is a reference to the DOM element of invocation.

Please find the working code below:

$("li").click(function(){
  $(this).toggleClass("selected");
  $(".selected").each(function(){
    $(".items").append($(this).text() + ", ");
  });
});

$(".selected").each(function(){
  $(".items").append($(this).text() + ", ");
});

.selected{
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='category'>
  <h4>Category</h4>
  <a href="#"><li class="selected">Link 1</li></a>
  <a href="#"><li>Link 2</li></a>
  <a href="#"><li>Link 3</li></a>
  <a href="#"><li class="selected">Link 4</li></a>
  <a href="#"><li class="selected">Link 5</li></a>
  <a href="#"><li>Link 6</li></a>
  <a href="#"><li>Link 7</li></a>
</ul>

<span class="items">Selected Items Appear Here</span>

Read up on this: jQuery $(this) vs Javascript this

Looping through .find() results and gathering .text()

4 Answers4