在 Jquery 中编写以下代码的优化方法是什么答案

【问题标题】：What is optimized way to write this below code in Jquery在 Jquery 中编写以下代码的优化方法是什么
【发布时间】：2015-02-04 11:51:21
【问题描述】：

$('#form').on('focusout', 'div1 select:last-child', function () {
    nFocusOut(this)
});
$('#form').on('focusout', 'div2 select:last-child', function () {
    nFocusOut(this)
});
$('#form').on('focusout', 'div3 input[type=button]:last-child', function () {
    nFocusOut(this)
});
$('#form').on('focusout', 'div4 input[type=button]:last-child', function () {
    nFocusOut(this)
});
$('#form').on('focusout', 'div5 input[type=checkbox]:last', function () {
    nFocusOut(this)
});

【问题讨论】：

为所有这些特定元素使用一个公共类
什么是 div1 和类似的东西？如果它是 <div1>，则它不是有效的 HTML
@AmitJoki 完全正确。 OP 应该已经提供了相关的 HTML 标记。顺便说一句，我想知道nFocusOut() 方法的目的？！

标签： javascript jquery jquery-ui javascript-events

【解决方案1】：

使用multiple-selector。

选择所有指定选择器的组合结果。

代码

$('#form').on('focusout', 'div1 select:last-child,div2 select:last-child,div3 input[type=button]:last-child,div4 input[type=button]:last-child,div5 input[type=checkbox]:last', function () { 
 nFocusOut(this); 
});

【讨论】：

感谢您的回答！！

【解决方案2】：

你可以做到以下。我想div1 是一个类或 id，因为<div1> 或类似的东西是无效的 HTML。

$('#form').on('focusout', '[class^=div1] :input:last-child', function () {
    nFocusOut(this);
});

【讨论】：

【解决方案3】：

试试这个：您可以使用逗号分隔的选择器列表并将其传递给事件处理程序

var selector = 'div1 select:last-child, div2 select:last-child, div3 input[type=button]:last-child, div4 input[type=button]:last-child, div5 input[type=checkbox]:last';

$('#form').on('focusout', selector , function () { nFocusOut(this) });

或
您可以将class="someClassName" 用于所有必需的 div 元素，并使用该类选择器绑定事件处理程序，这样每当您需要从事件处理程序中添加或删除元素时，您都无需更改 jQuery 选择器
例如-

$('#form').on('focusout', '.someClassName', function () { nFocusOut(this) });

【讨论】：

这个类是否需要添加到 div 的每个 Last 子级或特定的 Div 上？
对于像div1 select:last-child这样的div的最后一个孩子，您需要将class="someClassName"添加到select的最后一个div1
很高兴为您提供帮助！如果你觉得这个答案有用，你可以投票并接受这个答案