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

Question

我正在尝试制作一个行分隔符，它将有一些文本作为标题，然后在文本后面加上删除线到页面的边缘。我以为我正在正确地编写 jquery 来调用分隔符 div 的每个实例上的函数，但显然我不是。

这是我认为应该是的：

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

在这里看小提琴：http: //jsfiddle.net/WY7tL/

score 8 · Accepted Answer

解决方案

您必须指定.s-text要选择的元素，在这种情况下，是 selected的子.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 现场演示

纯 JavaScript 演示

性能比较

score 1 · Accepted Answer

1

http://jsfiddle.net/WY7tL/1/

你必须打电话$(this).children('.class') 看小提琴中的代码

于 2013-08-01T14:35:30.760 回答

score 0 · Accepted Answer

您需要.separator通过调用find()从内部获取相关元素

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