[英]Shift data of one li & ul tag from one div class tag to another div id tag without any li & ul tags just only data
This is my code below: 这是我的代码如下:
<div id="title">
<span><b>Title</b></span>
</div>
<div class="data">
<ul>
<li id="cp_name" class=""><span>Name:</span> XXXX</li>
<li id="cp_dept" class=""><span>Dept:</span> Editing</li>
<li id="cp_role" class=""><span>Role:</span> YYYY</li>
</ul>
</div>
Original Output 原始输出
Title 标题
Expected Output & Code 预期输出和代码
Title 标题
Dept: Editing 部门:编辑
Role: YYYY 角色:YYYY
<div id="title"> <span><b>Title</b></span> <div id="cp_dept"> <span>Dept:</span> Editing </div> </div> <div class="data"> <ul> <li id="cp_name" class=""><span>Name:</span> XXXX</li> <li id="cp_role" class=""><span>Role:</span> YYYY</li> </ul> </div>
I want to extract or just remove li & ul tags of "cp_dept" ie Dept: Editing data from div class="data" & wan't to shift data into div id="title" tag without li & ul tags ie just only data as shown in Expected Output & Code that too with immediate effect on page loading. 我想提取或仅删除“ cp_dept”的li&ul标签,即部门:编辑来自div class =“ data”的数据,并且希望将数据移入没有li&ul标签的div id =“ title”标签,即仅预期输出和代码中显示的数据也会立即对页面加载产生影响。
var dept = $(".data ul li#cp_dept").html(); dept = "<div id='cp_dept'>" + dept + "</div>"; $("#title").append(dept); $(".data ul li#cp_dept").remove();
Use insertAfter jQuery function : (remove and append) 使用insertAfter jQuery函数:(删除并追加)
$(function() {
$('#cp_dept').insertAfter('#title span');
});
Check out this javascript only answer 看看这个javascript唯一答案
JS JS
(function() {
var dpt = document.getElementById('cp_dept');
dpt.outerHTML=""
var tit = document.getElementById('title');
tit.innerHTML = tit.innerHTML +"<br>"+dpt.textContent;
})();
Just added or edited a line in the Javascript. 刚刚在Javascript中添加或编辑了一行。 Instead of removing or editing cp_dept, I assign the CSS to
display:none
. 我
display:none
删除或编辑cp_dept,而是将CSS分配为display:none
。 It does the same function but this way I'm not erasing the contents of the cp_dept tag and hence the HTML markup remains intact. 它具有相同的功能,但是通过这种方式,我不会擦除cp_dept标记的内容,因此HTML标记保持不变。
(function() {
var dpt = document.getElementById('cp_dept');
// dpt.outerHTML=""
dpt.style.display="none";
var tit = document.getElementById('title');
tit.innerHTML = tit.innerHTML +"<br>"+dpt.textContent;
})();
Try this 尝试这个
var htm = $("#cp_dept").text();
$("#data ul #cp_dept").remove();
$("#title").append('<div id="cp_dept">'+htm+'</div>');
Here is the code 这是代码
$(document).ready(function() {
var getli = $('.data #cp_dept');
$('.data #cp_dept').remove();
$creDiv = $('<div />').attr('id',getli.attr('id'))
.html(getli.html());
$("#title").append($creDiv);
});
But you may be looking for more, please comment on it 但是您可能正在寻找更多,请对此发表评论
You can create a new element to append the "cp_dept" target, then add the new element to "#title". 您可以创建一个新元素以附加“ cp_dept”目标,然后将新元素添加到“ #title”。
var title = document.getElementById('title');
var dept = document.getElementById('cp_dept');
var newDept = document.createElement('div');
newDept.innerHTML = dept.innerHTML;
// remove the old cp_dept
dept.parentNode.removeChild(dept);
title.appendChild(newDept);
$("li#cp_dept").each(function(){
var div = $("<div id='"+$(this).attr("id")+"'/>");
div.html($(this).html());
div.appendTo("div#title");
$(this).remove();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.