1

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?

4 Answers 4

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 + ", ");
1
  • I can't believe I missed that, Thanks @Billy!
    – User K
    Nov 30, 2014 at 6:57
1

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>

1
  • This was very useful, Thanks a bunch Arun P Johny!
    – User K
    Nov 30, 2014 at 7:05
1

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

-1

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.