专题1234导航

jquery使用find无法获取动态生成的元素

来源:互联网
发表时间:2017/4/21 16:51:45
责任编辑:李志喜
字体:

为了帮助网友解决“jquery使用find无法获取动态生成的元素”相关的问题,学网通过互联网对“jquery使用find无法获取动态生成的元素”相关的解决方案进行了整理,用户详细问题包括:jqueryhtmlfind动态元素使用jquery动态生成一个ul li的多级列表树,如下图:
点击图片看大图学网 www.xue163.com



现在想要在勾选A的时候,自动勾选A的下级以及下下级等。但是我用find无法获取到当前勾选元素的下级,在非动态生成的代码中是可以实现的。
具体代码如下:(包含一部分非动态生成的测试代码)


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://pic.xue163.com/http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<%@ include file="taglib.jsp" %>
<html>
<head>
<title>Index</title>
<link href="<c:url value="/resources/css/index.css"/>" rel="stylesheet">
</head>
<body>

<div>
<div>
<a>aaa</a>
</div>
<div id="test">
<ul>
<li>
<span>[+]</span><input type="checkbox">A
<ul>
<li>
<span>[*]</span><input type="checkbox">A1
</li>
<li>
<span>[*]</span><input type="checkbox">A2
</li>
</ul>
</li>
<li>
<span>[-]</span><input type="checkbox">B
</li>
<li>
<span>[*]</span><input type="checkbox">C
</li>
</ul>
</div>
<br><br><br>
<div id="tree">
</div>
</div>

<script src="resources/js/jquery.min.js"></script>
<script src="resources/js/index.js"></script>

</body>
</html>




$(document).ready(function() {
var jsonData = [
{"name":"A", "children":[{"name":"A1", "children":[]}, {"name":"A2", "children":[{"name":"A21", "children":[]}, {"name":"A22", "children":[]}]}, {"name":"A3", "children":[]}]}, 
{"name":"B", "children":[{"name":"B1", "children":[{"name":"B11", "children":[{"name":"B111", "children":[]}]}, {"name":"B12", "children":[]}, {"name":"B13", "children":[]}]}, {"name":"B2", "children":[]}, {"name":"B3", "children":[]}]}
];

var html = initTree(jsonData);
$("#tree").html(html);

$("#tree").on("click", "input[type='checkbox']", function() {
console.log("checkbox");
console.log($(this).prop("checked"));
if ($(this).prop("checked")) {
console.log($(this).parent().find("input[type='checkbox']"));
$(this).parent().find("input[type='checkbox']").prop("checked", true);
} else {
$(this).parent().find("input[type='checkbox']").prop("checked", false);
}
});

$("#test").on("click", "input[type='checkbox']", function() {
console.log("checkbox");
console.log($(this).prop("checked"));
if ($(this).prop("checked")) {
console.log($(this).parent().children());
console.log($(this).parent().find("input[type='checkbox']"));
$(this).parent().find("input[type='checkbox']").prop("checked", true);
} else {
$(this).parent().find("input[type='checkbox']").prop("checked", false);
}
});

$("#tree").on("click", "span", function() {
console.log("click");
});

});

function initTree(list) {
var html = "<ul>";
for (var i = 0; i < list.length; i++) {
var node = list[i];
if (node.children.length > 0) {
html = html + '<li><span>[-]</span><input type="checkbox">' + node.name + '</li>';
html = html + initTree(node.children);
} else {
html = html + '<li><span>[*]</span><input type="checkbox">' + node.name + '</li>';
}
}
html = html + "</ul>";
return html;
}
,具体解决方案如下:

解决方案1:
你动态生成的格式不对。子菜单的ul应该放父菜单的li中


function initTree(list) {
var html = "<ul>";
for (var i = 0; i < list.length; i++) {
var node = list[i];
if (node.children.length > 0) {
html = html + '<li><span>[-]</span><input type="checkbox">' + node.name;
html = html + initTree(node.children);
html = html + '</li>';
} else {
html = html + '<li><span>[*]</span><input type="checkbox">' + node.name + '</li>';
}
}
html = html + "</ul>";
return html;
}

解决方案2:
应该是可以的。find之后是一个数组吧,直接prop不行吧。

解决方案3:

引用 1 楼 jslang 的回复:
你动态生成的格式不对。子菜单的ul应该放父菜单的li中

function initTree(list) {
var html = "<ul>";
for (var i = 0; i < list.length; i++) {
var node = list[i];
if (node.children.length > 0) {
html = html + '<li><span>[-]</span><input type="checkbox">' + node.name;
html = html + initTree(node.children);
html = html + '</li>';
} else {
html = html + '<li><span>[*]</span><input type="checkbox">' + node.name + '</li>';
}
}
html = html + "</ul>";
return html;
}

确实如此,是我大意了,还一直以为是find无法找到动态生成元素的问题。
谢谢,分已给。

www.xue163.com true http://www.xue163.com/588880/39215/392158916.html report 7273 jquery使用find无法获取动态生成的元素:解决方案1:你动态生成的格式不对。子菜单的ul应该放父菜单的li中function initTree(list) {var html = "<ul>";for (var i = 0; i < list.length; i++) {var node = list[i];if (node.children.leng...
相关信息
最近关注
首页推荐
热门图片
最新添加资讯
24小时热门资讯
精彩资讯
精彩推荐
热点推荐
真视界
精彩图片
社区精粹
关于本站 | 广告服务 | 手机版 | 商务合作 | 免责申明 | 招聘信息 | 联系我们
Copyright © 2004-2016 Xue163.com All Rights Reserved. 学网 版权所有
京ICP备10044368号-1 京公网安备11010802011102号