文字对象和jquery选择器DRY
literal object and jquery selectors DRY
>我有一个案例,我想这样做:
var els = {
div: $('div'),
p: els.div.find('p'),
span: els.p.find('span')
};
但这种情况会发生:
console.log(els.div); // Works
console.log(els.p); // undefined
所以我目前正在这样做:
var els = (function(){
var div = $('div'),
p = div.find('p'),
span = p.find('span');
return {
div: div,
p: p,
span: span
}
}());
console.log(els.p); // Works now
有什么方法可以让它变干吗?似乎是一堆代码才能做到这一点。
您可以逐步构建它:
vars els = { div: $('div') };
els.p = els.div.find('p');
els.span = els.p.find('span');
或者像这样:
vars els = { };
els.div = $('div');
els.p = els.div.find('p');
els.span = els.p.find('span');
如果它对你来说看起来更一致。
你应该可以做这样的事情,对吧?
var els = {
div: $('div'),
p: this.div.find('p'),
span: this.p.find('span')
};
我使用了 this
关键字而不是对象内部的els
。
为了更进一步,您可以使用工厂模式为您处理对象创建。
function getChildElements(container, childTags) {
var elements = {};
// Default tags to find if none were specified.
childTags = childTags || [ "p", "span" ];
// Loop through the childTags and find them in the container
childTags.forEach(function (tag) {
elements[tag] = container.find(tag);
});
return elements;
}
客户端可以使用此工厂方法从父元素检索子元素,如下所示:
var els = getChildElements($("div"));
相关文章:
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 在动态创建的元素上获取对特定选择器的引用
- AngularJS-在JSON选择器中使用变量名
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- jQuery最近父级的数据属性选择器
- 为什么不'在JQuery中找到第二个css选择器的工作
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- jquery IE7中的第n个选择器
- Webdriver.io pageObject模式-通过传递参数来定义元素选择器
- jquery日期选择器年份范围默认值
- jquery日期选择器失去了交互性
- 正在搜索JavaScript日期选择器滑块
- 如何将返回的值应用于多个不同位置的多个选择器
- 每个选择器的Jquery css颜色都在变化,但字体大小却没有变化
- 如何在多个jQueryUI日期选择器中屏蔽特定日期
- jquery日期选择器显示与值不同的文本
- jQuery选择器无法正常工作
- 文档就绪提供了错误的选择器高度
- 文字对象和jquery选择器DRY