我有一个通过 ajax 返回的 HTML 列表。但是，所有条目都由逗号分隔。我如何用逗号分割每个结果并按顺序附加到 /li ？
HTML
<form class="form-inline mt-2 mt-md-0">
<input
class="form-control mr-sm-2"
type="text"
name="search"
placeholder="Search"
aria-label="Search"
/>
<button id="search-btn" class="btn btn-outline-success my-2 my-sm-0" type="submit">
Search
</button>
</form>
<ul id="response">
<li>Attack
</li>
<li>Defence
</li>
<li>Strength
</li>
<li>HitPoints
</li>
</ul>
查询
$('#search-btn').on('click', function(e) {
e.preventDefault();
var url = "?=";
var searchValue = $('input[name="search"]').val();
var urlAddition = url + searchValue
$.ajax({
url: urlAddition,
dataType: "html",
success: function(data) {
alert(data);
$('ul#response').html(data);
}
});
});
使用.split()用逗号分割字符串，使用.map()循环遍历项目，创建 li 并将它们附加到 ul。
const res = 'Attack, Defence, Strength, HitPoints';
const list = res.split(",");
$('#response').html(list.map(item => '<li>' + item + '</li>').join(''));<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul id="response"></ul>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句