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

【问题标题】：Javascript OR operator in variable assignment with jQuery selectors使用 jQuery 选择器进行变量赋值的 Javascript OR 运算符
【发布时间】：2017-12-06 14:23:37
【问题描述】：

鉴于这个简单的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（另请参阅this thread）

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

我哪里错了？这是JSFiddle...非常感谢！

【问题讨论】：

查看 AND、OR 操作:: stackoverflow.com/questions/10687131/…
尝试像这样编写内联：(container.children('li.active') || container.closest('li') ? true : false)
container.children('li.active') 永远不会为空/未定义，因为它始终是一个 JQuery 对象，它是否有任何元素是另一回事。
phuzi 是对的，考虑使用.length。查看更新的JSfiddle

标签： jquery

【解决方案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>

【讨论】：

【解决方案2】：

以下值在 JavaScript 中被视为“假”。

假
空
“”（空字符串）
0
南
未定义

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

请安慰这个声明，你会得到一些澄清。 console.log(container.children('li.active'))

【讨论】：