jQuery:用一条链定义多个变量

jQuery: Define multiple variables with a single chain?

本文关键字：变量 定义 一条 jQuery      更新时间：2023-09-26

是否可以用单个jQuery链定义多个变量?

var sectionTable = jQuery("#sectionsTable");
var sectionTableRows = sectionTable.find("tr");
var sectionTableColumns = sectionTableRows.find("td");

我不知道语法是什么，如果它是可能的，但如果你把上面的3个变量，你怎么能把它们链起来，它会被认为是良好的实践吗?

多谢克里斯

编辑:哇，感谢所有的评论。对不起，我是模糊的，我所追求的是一个更好的方式(如果存在的话)从父变量定义子变量。这就是为什么我想到使用链条，并想知道是否存在一种方法。谢谢你的建议。

如果你真的想，一切皆有可能:

在我的脑海中，你可以试着这样做:

var sectionTable,
    sectionTableRows, 
    sectionTableColumns = $('td', (sectionTableRows = $('tr',(sectionTable = $('#sectionsTable')))));

另一个想法是构建一个迷你插件，将当前jquery对象分配给对象的特定字段:

jQuery.fn.assignTo = function(variableName,namespace){
    var ns = namespace || window;
    ns[variableName] = this;
    return this;
}

使用这种代码，您可以执行以下操作:

var sections = {};
jQuery("#sectionsTable")
    .assignTo('sectionTable',sections)
    .find("tr")
        .assignTo('sectionTableRows',sections)
        .find("td")
            .assignTo('sectionTableColumns',sections);
console.log(sections.sectionTable);
console.log(sections.sectionTableRows);
console.log(sections.sectionTableColumns);

当然，如果你没有指定任何命名空间，变量将是全局的(将附加到window对象);

无论如何，我不鼓励您使用这些示例，因为为了支持更少的等号和var声明而降低代码的可读性并没有多大意义。

我可能不太明白您想要什么或需要什么，但是您可以为jQuery包装集链接任何函数并"结束"它，从而"返回"到前一个集。例如:

jQuery("#sectionsTable").css('background-color', 'red')
.find('tr').css('background-color', 'yellow')
.find('td').css('background-color', 'black')
.end() // back to 'tr'
.doSomething()
.end() // back to '#sectionsTable'
.doSomething();
但是，这意味着您只需要访问一次元素。如果您需要稍后在代码中访问它们，出于性能原因，总是应该将结果引用存储在变量中。

您可以这样重写:

var $sectionTable = $('#sectionsTable'),
    $sectionTableRows = $('tr', $sectionTable),
    $sectionTableColumns = $('td', $sectionTableRows);

当然，这只有在你要使用这三个变量的时候才有用。

我唯一想到的是单变量声明，如:

var sectionTable = jQuery("#sectionsTable"), 
sectionTableRows = sectionTable.find("tr"), 
sectionTableColumns = sectionTableRows.find("td");

你为什么要这么做?

定义这三个变量有什么问题?

(不，你不能)。

如果您根本不需要 sectionTable或sectionTableRows变量，您当然可以这样做;

var sectionTableColumns = jQuery("#sectionsTable").find("tr").find("td");

使用后代选择器时，可以将其缩短为;

var sectionTableColumns = jQuery("#sectionsTable tr td");
相关文章：