在文本區域按類別存儲不同的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> 

我想將每個ul列表的「名稱」和「價格」類元素存儲到使用javascript的文本區域中。我會碰到這樣的：

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

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>