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>

我想存储＆＃34;名称＆＃34;和＆＃34;价格＆＃34;使用javascript将每个ul列表的元素分类到文本区域。我会有类似的东西：

寿司45

披萨10

感谢您的帮助

Answer 1

这应该做你想要的。

我遍历您的所有ul并提取您想要的数据，然后将其添加到str。完成后，它会将str添加到textarea

＆＃13;

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)

＆＃13;

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

＆＃13;

Answer 2

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 3

尝试以下方法：

$('ul li').each(function(i, el){
  if($(el).hasClass('name')){
    $('#txtArea').append($(el).text());
    $('#txtArea').append(' ')
  }
  else if($(el).hasClass('price')){
    $('#txtArea').append($(el).text());
    $('#txtArea').append('\n')
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea id="txtArea"></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>

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

3 个答案: