在类的每个项目上运行jquery函数我做错了什么？

Question

我正在尝试创建一个行分隔符,它将有一些文本作为标题,然后按照文本进行页面边缘的删除.我以为我正在编写jquery的位,以便在我的分隔符div的每个实例上调用该函数,但显然我不是.

这是我认为它应该是:

$(".separator").each(function() {
    var linewidth = 706 - $(".s-text").width();
    $(".s-line").width(linewidth);
}); 

请看这里的小提琴:http://jsfiddle.net/WY7tL/

Answer 1

解

您必须指定.s-text要选择元素,在这种情况下,孩子的选择的.separator.

说明

$.each(),或$('selector').each()将遍历与您提供的选择器查询相对应的所有元素.

每次进入循环时,选择对应于相应元素阵列的索引的特定元素并将其分配给变量this.

this是DOMElement,而不是JQuery对象.这就是为什么我们把它放在括号内,调用它上面的JQuery($)对象:$(this).

的JavaScript/jQuery的

$(".separator").each(function() 
{
    var linewidth = 706 - $(this).find(".s-text").width();
    $(this).find(".s-line").width(linewidth);
}); 

纯JavaScript

var sep = document.getElementsByClassName('separator');
for (var i in sep)
{
    if(sep[i].nodeType==1)
    {
        var linewidth = 706 - sep[i].querySelector('.s-text').offsetWidth;
        sep[i].querySelector('.s-line').style.width = linewidth+"px";
    }
}

JQuery Live Demo

纯JavaScript演示

性能比较