动态地向另一个UL的无序列表添加元素的同时添加图像
Add image while adding elements to a unordered list from another UL dynamically
当我点击鼠标悬停在文本上时出现的图像时,该元素将被移动到另一个UL。我需要相同的图像选项,因为这是在第一个列表中删除它。我不知道如何动态地添加它。有人能帮忙吗?提前感谢。
图片链接为:
https://www.signaturecontrolsystems.com/Support/SmallRedX.gif<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script type = "text/javascript" src = "js/jquery.js"></script>
<script type = "text/javascript" src = "js/jquery_ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
#firstlist li:hover img {display: inline;}
#firstlist li:hover { background: #CCF5CC; }
#firstlist .ui-selected { background: #80B280; }
#firstlist { list-style-type: none;}
#firstlist li { margin: 3px; padding: 0.3em;}
#seclist {list-style-type: none;}
#seclist li {padding: 0.4em;}
img {display:none;}
</style>
</head>
<body>
<table id="myTable" class= "table table-bordered">
<tr>
<th class="col-md-6 text-center success">
List 1
</th>
<th class="col-md-6 text-center success">
List 2
</th>
</tr>
<tr>
<td class="col-md-6">
<ul id="firstlist">
<li>Apple <img src="next.jpg" class = "list1"></li>
<li>Orange <img src="next.jpg" class = "list1"></li>
<li>Avacado <img src="next.jpg" class = "list1"></li>
<li>Banana <img src="next.jpg" class = "list1"></li>
<li>Mango <img src="next.jpg" class = "list1"></li>
<ul>
</td>
<td class="col-md-6">
<ul class = "seclist" id = "seclist"> </ul>
</td>
</tr>
</table>
<script>
$(function(){
$( "#firstlist" ).selectable();
});
$(function() {
$( "#seclist" ).selectable();
});
$(".list1").click(function() {
var text = $(this).closest("li").text();
$('<li />', {html: text}).appendTo('ul.seclist')
$(this).unbind('click');
});
</script>
</body>
</html>
$(".list1").click(function() {
var text = $(this).closest("li").text();
$('<li/>', {html: text}).addClass("ui-selectee").appendTo('ul.seclist').append("<img src='cancel.jpg' class = 'list2 ui-selectee'/>");
this.style.visibility = 'hidden';
});
$('ul').on('click', '.list2', function(e) {
$(this).parent('li').remove();
var liTwo = $(this).closest("li").text();
var listItems = $("#firstlist li");
listItems.each(function(li) {
var liOne = $(this).text();
if(liTwo.match(liOne)){
document.getElementById(liOne.trim()).style.visibility = 'visible';
}
});
});
演示小提琴
而不是.text()
尝试使用 .html()
var text = $(this).closest("li").text();
var text = $(this).closest("li").html();
根据文档
.text()
:-获取匹配元素集合中每个元素的组合文本内容,包括它们的后代元素,或者设置匹配元素的文本内容。
.html()
:-获取匹配元素集合中第一个元素的HTML内容或设置每个匹配元素的HTML内容。
简单来说, .text()
方法的结果是一个字符串,而.html()
方法的结果是第一个匹配元素的HTML内容。
相关文章:
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 如何使用jquery遍历具有动态添加元素的数组
- jQuery appendTo 替换元素而不是添加元素,如果正在添加的元素预先存在于列表中
- 如何使用jquery添加元素
- 动态添加元素上的 HammerJS
- CSS没有'使用javascript向页面动态添加元素时无法工作
- 使用Javascript在DOM元素中添加元素
- 在添加元素时激发JS事件
- 什么's是在IE8+中添加元素的最有效方法
- d3.js在添加元素时协调
- 使用路由器链接动态添加元素
- 动态添加元素
- 在页面内容完全加载后,使用jQuery在DOM中添加元素
- j查询绑定单击不添加元素
- 在循环 jQuery 上添加元素
- 从一个页面调用 javascript 函数以在第二个页面上添加元素
- 页面加载后向<正文>添加元素时出现问题
- 动态添加元素时刷新 HTML
- 动态添加元素时不触发 JQuery 事件
- 如何使用 JavaScript 获取动态添加元素的宽度