使用后引用的Jquery每个循环答案

【问题标题】：Jquery each loop with after reference使用后引用的Jquery每个循环
【发布时间】：2013-05-06 19:56:35
【问题描述】：

我想画一条从 .class 元素到 class 元素的画布线。到目前为止，我可以通过 elements.first() 和 elements.first() 引用类中的开始和结束元素。

困难在于我想使用需要起点和终点的 quadraticCurveTo。结束点是 .class 中的下一个元素。

$('.myclass').chainlines();
$.fn.chainlines = function(){
context.moveTo($(this).first().position().left+15,$(this).first().position().top+20);
$(this).each(function(){
next = $(this).next();
context.quadraticCurveTo($(this).first().position().left+60,
$(this).position().top+25,$(next).position().left+15,$(next).position().top+15);
});
};

我有一个 jsfiddle 示例，我需要将其扩展为链式 .见LINK。

这对我不起作用。

【问题讨论】：

我看不出链接的小提琴与这段代码 sn-p 有什么关系。此外，该代码 sn-p 不是有效的 jQuery。
是什么让你认为在 jQuery 中有一个实际的 .id() 方法，你试过 .prop('id')
@adeneo id 不是属性而是属性。
@adeneo 我很反对 Juhana，顺便说一句，'id' 应该始终保持默认值，所以没有理由在这里使用 .prop()。但是对于 'id'，这是一个错误的争论，因为我们应该使用 DOM 元素的属性来代替
@roasted，所以你建议使用element.getAttribute('id') 而不是element.id？因为这就是$(..).attr('id') 和$(..).prop('id') 之间的区别。 prop 和 attr 都应该可以正常工作，但我会坚持使用 prop 以保持一致性。

标签： jquery canvas each next

【解决方案1】：

也许这就是你要找的东西：

divs.each(function(){
   alert($(this).next().get(0).id);
})

【讨论】：

【解决方案2】：

小提琴似乎与你的问题无关......

我想你正在寻找这样的东西..

 divs.each(function(idx){
    alert(divs[idx].next().attr("id"));
 })

【讨论】：

为什么不使用 'this' 而不是 divs[idx] ？
@roasted Accessing by index is much faster 虽然在这种情况下它可能并不明显。
@Juhana 您建议通过索引访问比使用引用对象“this”更快，这很有趣，我会对其进行测试以查看发生了什么。
@roasted 我认为这是因为您每次都需要创建一个新的 jQuery 对象 ($(this)) 而不是重新使用现有的。
@KevinB 这是一个不同的 jQuery 对象，但具有相同的 DOM 元素，实际上是相同的东西。（编辑：啊，好吧，我明白你的意思了。）

【解决方案3】：

我自己解决了问题

$.fn.chainlines = function(){
    var divs = $(this);
    var count = $(this).length;
    for (var i = 0; i < count; i++) {
        if((i + 1) < count){
            context.moveTo($(divs[i]).position().left+15,$(divs[i]).position().top+20);
            context.quadraticCurveTo($(divs[i]).position().left+60,
                                 $(divs[i]).position().top+35,
                                 $(divs[i+1]).position().left+15,
                                 $(divs[i+1]).position().top+1);      
            context.stroke();
        }
    }
};

【讨论】：