每当我单击复选框时，它都包含任何子项“ UL”，而该“ LI”是最后一个子项，那么，我需要复制此UL子项，只有“ SPAN”需要复制并将其粘贴到目标文件夹。我尝试了下面的代码。
目的：每当我按下包含任何子ul的复选框时，如果它最后一个子ul，则应将其复制。
在此列表中，如果单击Node 1.1.1', Node 1.1.2 etc，则它应仅复制节点1.1.1，节点1.1.2等
在此列表中，如果我单击，Node 1.1则它应仅复制节点1.1.1，节点1.1.2等。
在此列表中，如果我单击，Node 1.2, Node 1.3 etc[Here It does not have descendant]则它应仅复制Node 1.2，Node 1.3等。而不能复制“ Node 1.1”，因为它具有后代。
在这份名单中，如果我点击，'Node 1'那么，它应该复制Node 1.1.1, Node 1.1.2, Node 1.1.3, Node 1.1.4 and Node 1.1.5然后Node 1.2[not 1.1 because it has descendant], Node 1.3, Node 1.4, Node 1.5 and Node 1.6
任何的想法？请。
<div class="form-group floatleft10" id="tree">
<ul>
<li>
<input type="checkbox" value="Node 1" /><span>Node 1</span>
<ul>
<li>
<input type="checkbox" value="Node 1.1" /><span>Node 1.1</span>
<ul>
<li>
<input type="checkbox" value="Node 1.1.1" /><span>Node 1.1.1</span></li>
<li>
<input type="checkbox" value="Node 1.1.2" /><span>Node 1.1.2</span></li>
<li>
<input type="checkbox" value="Node 1.1.3" /><span>Node 1.1.3</span></li>
<li>
<input type="checkbox" value="Node 1.1.4" /><span>Node 1.1.4</span></li>
<li>
<input type="checkbox" value="Node 1.1.5" /><span>Node 1.1.5</span></li>
</ul>
</li>
<li>
<input type="checkbox" value="Node 1.2" /><span>Node 1.2</span>
</li>
<li>
<input type="checkbox" value="Node 1.3" /><span>Node 1.3</span>
</li>
<li>
<input type="checkbox" value="Node 1.4" /><span>Node 1.4</span>
</li>
<li>
<input type="checkbox" value="Node 1.5" /><span>Node 1.5</span>
</li>
<li>
<input type="checkbox" value="Node 1.6" /><span>Node 1.6</span>
</li>
</ul>
</li>
<li>
<input type="checkbox" value="Node 2" /><span>Node 2</span>
<ul>
<li>
<input type="checkbox" value="Node 2.1" /><span>Node 2.1</span>
</li>
<li>
<input type="checkbox" value="Node 2.2" /><span>Node 2.2</span>
</li>
</ul>
</li>
</ul>
</div>
<div class="form-group floatleft13" id="checkbox-content"></div>
jQuery的
(function ($) {
$('div#tree input[type="checkbox"]').click(function () {
var $list = $("div#checkbox-content");
var $currElem = $(this).clone();
var $currElemNext = $(this).next().clone();
var $curElemVal = $(this).attr("value");
var $curElemValAdd = "";
var $curElemValNext = $(this).next().text();
if ($(this).parent().children("ul").children("li").prop('tagName') == undefined && $(this).parent().children("ul").prop('tagName') == undefined) {
console.log($(this).val());
$list.append($('<div data-value="' + $(this).val() + '"></div>').append($currElemNext));
var $thisTempAdd = $(this).val();
var $currElemSiblngs = $(this).parent().clone();
//$currElemSiblngs.find(":checkbox").remove();
var newCopiedElements = $currElemSiblngs.find("span.daredevel-tree-label").clone();
var $tempVal = $(this).html();
//$curElemValAdd += '<div class="try"><span>'+ $tempVal +'</span></div>';
console.log("Here");
$list.find("div").filter(function () { return $(this).data('value') === $thisTempAdd });
}
/// Second Level
else if ($(this).parent().children("ul").children("li").prop('tagName') == "LI" && $(this).parent().children("ul").prop('tagName') == "UL") {
//console.log();
var $currParent = $(this).parent().prop('tagName');
if ($(this).parent().has('ul') && $(this).parent().children('ul').parent().prop('tagName') == $currParent) {
console.log("dshdsdhdd");
var $currElemSiblngs = $(this).parent().children('ul').children("li");
//$currElemSiblngs.find(":checkbox").remove();
var newCopiedElements = $currElemSiblngs.find("span.daredevel-tree-label").clone();
var $curElemValAdd = "";
$(newCopiedElements).each(function () {
var $tempVal = $(this).html();
console.log($(this).text());
$curElemValAdd += '<div data-value="' + $(this).text() + '"><span>' + $tempVal + '</span></div>';
});
$list.append($curElemValAdd);
}
}
/// First Level
else if ($(this).parent().children("ul").children("li").children("ul").children("li").prop('tagName') == "LI") {
var $currParent = $(this).parent().prop('tagName');
if ($(this).parent().children("ul").children("li").children("ul") && $(this).parent().children("ul").children("li").children("ul").children("li").prop('tagName') == $currParent) {
console.log("dshdsdhddHHHHHHHHHHH");
var $currElemSiblngs = $(this).parent().children("ul").children("li").children("ul");
//$currElemSiblngs.find(":checkbox").remove();
var newCopiedElements = $currElemSiblngs.find("span.daredevel-tree-label").clone();
var $curElemValAdd = "";
$(newCopiedElements).each(function () {
var $tempVal = $(this).html();
console.log($(this).text());
$curElemValAdd += '<div data-value="' + $(this).text() + '"><span>' + $tempVal + '</span></div>';
});
$list.append($curElemValAdd);
}
} else if (!this.checked) {
//alert("new function");
var thisTemp = $(this).val();
//console.log(thisTemp);
$list.find("div").filter(function () { return $(this).data('value') === thisTemp }).remove();
}
else if (this.checked) {
$list.append($('<div></div>').append($currElemNext));
//$list.append($currElemNext);
} else {
//hide to the right
$list.find('span').filter(function () {
console.log($curElemVal);
console.log($curElemValAdd);
return ($(this).text() === $curElemVal || $(this).text() === $curElemValAdd)
}).slideUp("fast", function () {
//$(this).next('span').remove();
$(this).remove();
//alert("2");
});
}
});
})(jQuery);
更新
检查一下：https : //jsfiddle.net/b36921na/3/
(function ($) {
$('div#tree input[type="checkbox"]').click(function () {
$('#checkbox-content').text('');
printNodeValues($(this));
});
})(jQuery);
function printNodeValues(element) {
if (element.parent().children('ul').length > 0) {
element.parent().children('ul').children('li').each(function() {
printNodeValues($(this).children('input'));
});
} else {
$('#checkbox-content').html($('#checkbox-content').html() + "<br />" + element.val());
}
}
上面的代码使用递归。如果这不是您想要的，请让我知道单击节点1，节点1.1，节点1.1.1，...，节点1.1.5，节点1.2，...时应该发生的情况。 ，节点1.6，节点2，节点2.1和节点2.2，我很乐意提供帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句