Question

考虑到这个简单的ul：

<ul class="dummy">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

这个jQuery代码：

var container = $('.dummy');
var active = container.children('li.active') || container.children('li:first-child')
console.log(active.html());

根据我在变量分配中使用||的了解，我希望应该选择第一个li，因为没有li.active（另见{ {3}}）

相反，在console.log我得到undefined而不是One：似乎永远不会评估container.children('li:first-child')

我哪里错了？这是一个this thread ...非常感谢！

Answer 1

因为jQuery方法返回一个jQuery对象，它始终是 truthy ;因此你得到了undefined。如果你只是想获得HTML，你可以使用。

var active = container.children('li.active').html() || container.children('li:first-child').html();

但是，如果要获取元素，请取消||并使用.length属性检查元素是否存在。

var active = container.children('li.active');
if(active.length == 0)
    active = container.children('li:first-child')

var container = $('.dummy');
var active = container.children('li.active').html() || container.children('li:first-child').html()
console.log(active);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dummy">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Answer 2

以下值被视为＆＃34; false＆＃34;在JavaScript中。

假
空
＆＃34;＆＃34; （空字符串）
0
南
未定义

||运算符适用于这些情况。在你的情况下container.children('li.active')没有返回任何上面的值，它是jquery选择器对象。所以在这种情况下，第二个选项将不会执行。

请控制此声明，您将获得一些澄清。 console.log(container.children('li.active'))

使用jQuery选择器进行变量赋值的Javascript OR运算符

2 个答案: