Question

我已获得以下代码：

的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>

我尝试使用 .selected 类搜索$（＆＃34; .category＆＃34;）的内容，然后将结果附加到另一个div。< / p>

这是我希望的结果：

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

然而， this.text（）似乎返回了一个未定义的错误关于我做错了什么的任何线索？

Answer 1

您需要在jQuery对象上调用.text()，并且由于this引用了该元素（请参阅jQuery docs for .each()），只需将this包裹在$()中在循环中创建当前元素的新jQuery对象。

示例：

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

在说这个时，你可能最好只使用.innerHTML，除非你出于其他原因需要jQuery对象。

示例：

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

Answer 2

您可以尝试类似

的内容

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>

Answer 3

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>

我希望这可能会帮助你

Answer 4

我认为您将Javascript＆＃39; this与jQuery＆＃39; $(this)混淆了。 $()是jQuery构造函数。 this是对调用的DOM元素的引用。

请找到以下工作代码：

＆＃13;

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

＆＃13;

.selected{
  background-color: yellow;
}

＆＃13;

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

＆＃13;

阅读：jQuery $(this) vs Javascript this

循环.find（）结果并收集.text（）

4 个答案: