87,904
社区成员
发帖
与我相关
我的任务
分享这是JQuery选择器的BUG吗？
是这样的，我要读取的页面有两个FORM，我就想找出我要的那个FORM，然后用find方法找到他下面我需要的input元素，但是我发现如果form是在table下，find就找不到input。测试代码如下：
各位帮忙分析下是什么情况？
<body>
<form id="testForm" name="appForm" class="map2">
<input type="hidden" name="appForm_RootElem" value="p_Customer"/>
<input type="hidden" name="appForm_KeyName" value="CstGUID"/>
<input type="hidden" name="appForm_AppName" value="Default"/>
</form>
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<form id="testForm2" name="appForm" class="map2">
<input type="hidden" name="appForm_RootElem" value="p_Customer"/>
<input type="hidden" name="appForm_KeyName" value="CstGUID"/>
<input type="hidden" name="appForm_AppName" value="Default"/>
</form>
</table>
</body>
<script>
var getElement = function(elements) {
if (elements.length > 0) {
return elements[0];
}
return null;
};
var whatsForm = "form[class='map2'] ";
var form = $(whatsForm).eq(0);
var entityName = form.find("input[name$='_RootElem']");
entityName = getElement(entityName);
entityName = entityName != null ? entityName.value : "未配置";
console.log && console.log(entityName); //输出“p_Customer”
form = $(whatsForm).eq(1);
entityName = form.find("input[name$='_RootElem']");
entityName = getElement(entityName);
entityName = entityName != null ? entityName.value : "未配置";
console.log && console.log(entityName); //输出“未配置”
</script>
各位帮忙分析下是什么情况？
...全文
请发表友善的回复…
发表回复
liefdiy 2014-01-26
- 打赏
- 举报
有两个form没什么问题，而且就算有问题我也改不了，前端HTML代码是第三方的，我只能写JS插件。
zhjdg 2014-01-26
- 打赏
- 举报
haha ，是不规范啊。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form id="testForm" name="appForm" class="map2">
<input type="hidden" name="appForm_RootElem" value="p_Customer" /> <input type="hidden" name="appForm_KeyName" value="CstGUID" /> <input type="hidden" name="appForm_AppName" value="Default" />
</form>
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<form id="testForm2" name="appForm" class="map2">
<input type="hidden" name="appForm_RootElem" value="p_Customer" /> <input type="hidden" name="appForm_KeyName" value="CstGUID" /> <input type="hidden" name="appForm_AppName" value="Default" />
</form>
</td>
</tr>
</table>
<script>
var $a = document.getElementById('testForm2');
var $b = $a.querySelectorAll("[id='testForm2'] input");
</script>
</body>
</html>liefdiy 2014-01-26
- 打赏
- 举报
难怪了，确实，按照规范写法就可以了。
zhjdg 2014-01-26
- 打赏
- 举报
的确是啊，我帮你顶n顶。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form id="testForm" name="appForm" class="map2">
<input type="hidden" name="appForm_RootElem" value="p_Customer" /> <input type="hidden" name="appForm_KeyName" value="CstGUID" /> <input type="hidden" name="appForm_AppName" value="Default" />
</form>
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<form id="testForm2" name="appForm" class="map2">
<input type="hidden" name="appForm_RootElem" value="p_Customer" /> <input type="hidden" name="appForm_KeyName" value="CstGUID" /> <input type="hidden" name="appForm_AppName" value="Default" />
</form>
</td>
</tr>
</table>
<script>
var $a = document.getElementById('testForm2');
var $b = $a.querySelectorAll("[id='testForm'] input");
</script>
</body>
</html>
人生难得一只鸡 2014-01-26
- 打赏
- 举报
这并不是所谓的bug，而是由于你的标签嵌套不规范所致，也就是所谓的前端规范
比如 拥有子父级关系的标签 如 ul li 理论上 ul 下可以嵌套除了li以外的任何标签，可是直接会影响到 js中 读取节点，由于结果混乱而导致节点混乱，根据节点的概念，认为你ul下只可能是li,否则 则会产生读取节点错误或者读取不到
修改如下
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td><form id="testForm2" name="appForm" class="map2">
<input type="hidden" name="appForm_RootElem" value="p_Customer"/>
<input type="hidden" name="appForm_KeyName" value="CstGUID"/>
<input type="hidden" name="appForm_AppName" value="Default"/>
</form></td>
</tr>
</table>
打字员 2014-01-26
- 打赏
- 举报
暈，你本身代碼不規範，流覽器會在解析html的時候自動進行一些操作（補全結束標籤啊撒的），你可以在firefox里用firebug查看一下頁面的html代碼你就知道了
以下是你的代碼在firefox里真正的結構
<body>
<form class="map2" name="appForm" id="testForm">
<input type="hidden" value="p_Customer" name="appForm_RootElem">
<input type="hidden" value="CstGUID" name="appForm_KeyName">
<input type="hidden" value="Default" name="appForm_AppName">
</form>
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<form class="map2" name="appForm" id="testForm2"></form>
<input type="hidden" value="p_Customer" name="appForm_RootElem">
<input type="hidden" value="CstGUID" name="appForm_KeyName">
<input type="hidden" value="Default" name="appForm_AppName">
</table>
</body>
叶黑 2014-01-26
- 打赏
- 举报
一个页面有两个form本身就有问题吧？
