[英]Add class name for generated Html using jquery
Below is html part 以下是html部分
<li class="main_menu catagory_li" id="cat4">
<p class="ahead"><span class="heading">Item 4</span>
<span class="fright remove">close</span></p>
</li>
when i click close
i copy the LI
using below code, 当我单击close
时,我使用以下代码复制LI
,
$('.remove').live('click',function(){
var closed_elem_id = $(this).parent().parent().attr('id');
s = $(this).parent().parent().clone().wrap('<div>').parent().html();
$('li#'+closed_elem_id).remove();
console.log(s);
});
This one removes the LI
in particular place and get the copy and store it in variable s
. 这将删除LI
的特定位置并获取副本并将其存储在variable s
。
My requirement is to add class called no-display in cloned copy like <span class="fright remove no-display">close</span>
. 我的要求是在克隆副本中添加名为no-display的<span class="fright remove no-display">close</span>
例如<span class="fright remove no-display">close</span>
。 I tried this many ways but it fails. 我尝试了很多方法,但是失败了。
Kindly advice on this 请对此提出建议
NOTE : updated my question 注意:更新了我的问题
做了一些优化: http : //jsfiddle.net/hKUd6/
Something like this: 像这样:
$('.remove').live('click',function(){
var pLi = $(this).closest('li');
s = $('<div>').append(pLi.clone().addClass('no-display')).html();
pLi.remove();
console.log(s);
});
This whole thing is very sloppy. 这整个事情很草率。 You don't need to use as much code as you have to accomplish the simple task you're attempting. 您不需要使用太多的代码即可完成您要尝试的简单任务。
Try something like this: 尝试这样的事情:
$("li").on("click", ".remove", function(){
var $this = $(this),
liCont = $this.closest("p"),
parentLi = $this.closest("li");
liCont
.clone()
.wrap(
$("<div>").addClass("no-display")
)
.appendTo("body");
parentLi.remove();
});
What we do here is capture the click event on any .remove
elements. 我们在这里所做的是捕获任何.remove
元素上的click事件。 We select the parent p
(which we later clone to wrap with a div
) as well as the parent li
. 我们选择父级p
(稍后将其克隆以用div
包装)以及父级li
。 We clone the p
element (including its contents), wrap it with a div
element (which we create using DOM scripting and add the class), and append the finished product to the body (you can change that if needed). 我们克隆p
元素(包括其内容),将其包装成div
元素(使用DOM脚本创建并添加类),然后将最终产品附加到正文中(如果需要,可以更改它)。 We then remove the original li
. 然后,我们删除原始的li
。
Try with this code, it should work: 尝试使用此代码,它应该可以工作:
$('.remove').live('click',function(){
var closed_elem = $(this).closest("li"); //get the li to be closed/removed
var clonedElem = closed_elem.clone().find("span.remove").addClass("no-display"); //clone the original li and add the no-display class to the span having remove class
closed_elem.remove(); //remove the original li
console.log(clonedElem);
});
Please check below lines of code. 请检查以下代码行。
first of all you need to get current class name using jquery: 首先,您需要使用jquery获取当前的类名称:
$('li #cat4').find('span').each(function(){
var classname = $(this).attr('class');
$(this).addClass(classname+' no-display');
});
This is not a complete code of your task, but its just a code by which you can get a current class and then add more required string to it and set new class. 这不是您任务的完整代码,而仅仅是一个代码,通过它您可以获取当前类,然后向其添加更多所需的字符串并设置新类。
Thanks. 谢谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.