jquery uncaught TypeError 无法读取第一页上未定义的属性“左侧”答案

【问题标题】：jquery uncaught TypeError cannot read property 'left' of undefined on first pagejquery uncaught TypeError 无法读取第一页上未定义的属性“左侧”
【发布时间】：2015-06-18 05:20:13
【问题描述】：

美好的一天，

我的网站出现问题，我在主页中收到“未捕获的 TypeError 无法读取未定义的属性 'left'”，但在其他页面中一切正常。

希望有人能帮助我解决这个问题。谢谢，

脚本：

$(document).ready(function() {
    $('#cssmenu').prepend('<div id="indicatorContainer"><div id="pIndicator"><div id="cIndicator"></div></div></div>');
    var activeElement = $('#cssmenu>ul>li:first');

    $('#cssmenu>ul>li').each(function() {
        if ($(this).hasClass('active')) {
            activeElement = $(this);
        }
    });
    var posLeft = activeElement.position().left; //here i get the error
});

html:

<div id='cssmenu'>
   <li><a class="active" style="font-family: Calibri;" href='Home.html'><span>Home</span></a></li>
   <li><a style="font-family: Calibri;" href='AboutUs.html'><span>About Us</span></a></li>
   <li class='active has-sub'>
      <a style="font-family: Calibri;" href='Products.html'><span>
      Products</span></a>
      <ul>
         <li><a style="font-family: Calibri;" href='Products_Argus_Responder.html'><span>Argus
            Responder</span></a>
         </li>
         <li><a style="font-family: Calibri;" href='Products_Argus_Explorer.html'><span>Argus
            Explorer</span></a>
         </li>
      </ul>
   </li>
   <li><a style="font-family: Calibri;" href='Warranty.html'><span>Warranty</span></a></li>
   <li class='last'><a style="font-family: Calibri;" href='ContactUs.html'><span>Contact
      Us</span></a>
   </li>
   </ul>
</div>

【问题讨论】：

没有<ul> 开始标签。改变它，它会工作
您在<div id='cssmenu'> 中缺少<ul>
html部分就这些了吗？
工作正常here如果你添加<ul>
请整理您的html代码缩进。缺少开始标签（div 和 ul）。很明显，如果没有在您的 JavaScript 文件中调用的 id 为 cssmenu 的元素，代码将生成错误。

标签： javascript jquery html

【解决方案1】：

您在#cssmenu 中缺少<ul>，因此您的选择器#cssmenu>ul>li.active 将找不到任何元素，因为它会查找ul，它是#cssmenu 元素的子元素。

你也可以使用类选择器来简化你的jQuery

$(document).ready(function() {
  $('#cssmenu').prepend('<div id="indicatorContainer"><div id="pIndicator"><div id="cIndicator"></div></div></div>');
  var activeElement = $('#cssmenu>ul>li.active');
  if (activeElement.length == 0) {
    activeElement = $('#cssmenu>ul>li:first');
  }
  var posLeft = activeElement.position().left; //here i get the error
  console.log(posLeft)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='cssmenu'>
  <ul>
    <li><a class="active" style="font-family: Calibri;" href='Home.html'><span>Home</span></a></li>
    <li><a style="font-family: Calibri;" href='AboutUs.html'><span>About Us</span></a></li>
    <li class='active has-sub'>
      <a style="font-family: Calibri;" href='Products.html'><span>
        Products</span></a>
      <ul>
        <li><a style="font-family: Calibri;" href='Products_Argus_Responder.html'><span>Argus
          Responder</span></a>
        </li>
        <li><a style="font-family: Calibri;" href='Products_Argus_Explorer.html'><span>Argus
          Explorer</span></a>
        </li>
      </ul>
    </li>
    <li><a style="font-family: Calibri;" href='Warranty.html'><span>Warranty</span></a></li>
    <li class='last'><a style="font-family: Calibri;" href='ContactUs.html'><span>Contact
      Us</span></a>
    </li>
  </ul>
</div>

演示：Problem、Solution

【讨论】：

【解决方案2】：

这个怎么样

  $('#cssmenu li:first');

这将查找每个 li 标签，然后将选择第一个标签，这消除了标签确切位置的复杂性，只要它在#cssmenu 元素中

【讨论】：

请尝试添加更多详细信息，说明该答案如何为问题提供解决方案，而不仅仅是复制粘贴代码 sn-ps。这样，OP（和其他任何人）将能够更好地理解您的答案。
这样更好看吗？

【解决方案3】：

这个函数找不到“activeElement”，因为它的选择器在“#cssmenu”后面找不到任何元素所以它是空的，你不能在它上面调用 position()。

【讨论】：