在文本区域按类存储不同的li项。

Question

你好，我想在文本区域中插入一些不同的列表元素。我有这样的东西

<ul id="each-1">
    <li class="remove"><img src="img/del.png"></li>
    <li class="name">sushi</li>
    <li class="price">45</li>
    <li class="substract"><img src="img/minus.png"></li>
    <li class="add"><img src="img/plus.png"></li>
</ul>
<ul id="each-2">
    <li class="remove"><img src="img/del.png"></li>
    <li class="name">pizza</li>
    <li class="price">10</li>
    <li class="substract"><img src="img/minus.png"></li>
    <li class="add"><img src="img/plus.png"></li>
</ul>

我希望使用javascript将每个ul列表中的"name“和"price”类元素存储到文本区域中。我会有这样的东西：

寿司45

比萨饼10

谢谢你的帮助

Answer 1

​

var text = "";                                    // the text that will be inserted into the textarea (initialize with "")
$("li.name").each(function() {                    // for each li.name element
  text += $(this).text() + " ";                   // add the text of that element (name) to text, followed by a space
  text += $(this).next("li.price").text() + "\n"; // add the text of its next li.price element (price), followed by a new line
});

$("#ta").val(text);                               // set the value of the text area to the accumulated string

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="ta"></textarea>
<ul id="each-1">
    <li class="remove"><img src="img/del.png"></li>
    <li class="name">sushi</li>
    <li class="price">45</li>
    <li class="substract"><img src="img/minus.png"></li>
    <li class="add"><img src="img/plus.png"></li>
</ul>
<ul id="each-2">
    <li class="remove"><img src="img/del.png"></li>
    <li class="name">pizza</li>
    <li class="price">10</li>
    <li class="substract"><img src="img/minus.png"></li>
    <li class="add"><img src="img/plus.png"></li>
</ul>

​

Answer 2

这应该能做你想做的。

我循环遍历所有的ul并提取您想要的数据，并将它们添加到str中。当它完成时，它将str添加到textarea

​

var str = "";
$("ul[id^='each']").each(function() {
  var name = $(this).find(".name").text();
  var price = $(this).find(".price").text();

  str += name + " " + price + "\n";
})
  
$("textarea").val(str)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="each-1">
  <li class="name">sushi</li>
  <li class="price">45</li>
</ul>
<ul id="each-2">
  <li class="name">pizza</li>
  <li class="price">10</li>
</ul>
<textarea></textarea>

​