IE使用Jquery时的问题答案

【问题标题】：Problems of IE when using JqueryIE使用Jquery时的问题
【发布时间】：2011-04-24 05:11:31
【问题描述】：

我正在使用复选框访问同级复选框 parentNode.nextElementSibling.value;它将返回值并在 Firefox 中正常工作。但在 IE 中它说 Object 为 null 并说

Microsoft JScript 运行时错误： 'parentNode.nextElementSibling.value' 为空或不是对象

我的功能如下

   function chkEnergy() {
             var inputs = $('.check input');
            var count = 0;var ok = 1;
        for (var i = 0; i < inputs.length; i++) {
            //alert(inputs[i].attr('checked'));
            if (inputs[i].checked == true) {
                var ch = inputs[i];
                var qty=ch.parentNode.nextElementSibling.value;
                if (qty == "0") {
                    ok = 0;
                    showStatus(true, "Please specify the Quantity");
                    return false;
                }
                else {
                    ok = 1;
                    continue;
                }
            }
        }
            if(ok==1)
                return true
            else
              return false;

     }

我使用这种方式在复选框和文本框所在的地方创建 dataList

     <asp:DataList ID="dlstEnergyItems" runat="server" RepeatColumns="4" RepeatDirection="Horizontal"  Width="100%">
  <ItemTemplate>
   <asp:CheckBox ID="cbEnergyItems" runat="server" CssClass="check" />
    <input type="text" id="txtQty"  style="width:25px" class="hide textbox numbers_only" value="0"  runat="server" /> 
       <asp:HiddenField ID="HdfEnergy" runat="server" />
            <asp:HiddenField ID="HdfEnergyCID" runat="server" />
        </ItemTemplate>
</asp:DataList>

渲染 HTML

<table cellspacing="0" border="0" style="width: 100%;
 border-collapse: collapse;" 
id="ctl00_ContentPlaceHolder1_dlstEnergyItems">
<tbody><tr>
<td>
 <span class="check"><input type="checkbox" name="ctl00$ContentPlaceHolder1$dlstEnergyItems$ctl00$cbEnergyItems" id="ctl00_ContentPlaceHolder1_dlstEnergyItems_ctl00_cbEnergyItems"><label for="ctl00_ContentPlaceHolder1_dlstEnergyItems_ctl00_cbEnergyItems">
Energy-1</label></span>
  <input type="text" value="0" class="textbox numbers_only" style="width: 25px;" id="ctl00_ContentPlaceHolder1_dlstEnergyItems_ctl00_txtQty" name="ctl00$ContentPlaceHolder1$dlstEnergyItems$ctl00$txtQty"> 
  <input type="hidden" value="1" id="ctl00_ContentPlaceHolder1_dlstEnergyItems_ctl00_HdfEnergy" name="ctl00$ContentPlaceHolder1$dlstEnergyItems$ctl00$HdfEnergy">
 <input type="hidden" 
id="ctl00_ContentPlaceHolder1_dlstEnergyItems_ctl00_HdfEnergyCID" name="ctl00$ContentPlaceHolder1$dlstEnergyItems$ctl00$HdfEnergyCID">
 </td></tr></tbody></table>

【问题讨论】：

你能发布一个项目的渲染 HTML 吗？

标签： asp.net jquery html internet-explorer

【解决方案1】：

IE 不支持 nextElementSibling，因为它是 ~~Firefox/Mozilla 发明的非标准属性~~ IE（不出所料）不支持的标准。

您需要改用标准的nextSibling，如果您的元素之间有可能的文本节点，您需要遍历它以查找下一个元素。

~~大多数 DOM 库（例如 jQuery）都提供此类功能。~~

我错过了你实际上在使用 jQuery，所以使用

var qty = $(ch).parent().next().val();

顺便说一句，混合使用 jQuery 和“纯”DOM 会让人感到困惑。这可能会导致这样的错误。

【讨论】：

请注意：nextElementSibling 不仅仅是专有的。它已在元素遍历规范（w3.org/TR/ElementTraversal，第 2.4 节）中标准化。但是，是的，标准化并不意味着支持。
@jsalonen：糟糕，错过了。谢谢。

【解决方案2】：

@jsalonen 有正确的原因（缺乏 IE 支持），但这里有一个解决方案...如果您包含 jQuery，请使用它:) 这是您的函数的简短版本，可以交叉使用-浏览器：

function chkEnergy() {
  var fails = $('.check:has(input:checked)').next("[value=0]").length;
  if (fails > 0) showStatus(true, "Please specify the Quantity");
  return fails === 0;
}

在此我们使用.next() 获取该输入字段并同时使用attribute-equals selector 仅获取具有0 的value 的那些字段（未通过数量检查）。如果我们找到的元素的.length 多于0，那么我们有一些失败...显示警报并返回false。

【讨论】：

同意。这是要走的路！

【解决方案3】：

你的问题其实不是 jQuery，而是 IE 特有的。

Internet Explorer does not support nextElementSibling 因此不会在其中定义它的值。

您的问题的解决方案是使用 jQuery 来访问元素，而不是直接访问 DOM（正如您现在正在做的那样）。

【讨论】：