0

我已经为我正在努力的代码制作了一个简化的示例（参见演示）。我首先有一个函数来计算<p>包装器 div 内部的行数。根据数量（1、2 或 3 行），包装器 div 应该获得一个额外的类名。

这些是我无法解决的错误：

  • 该函数在运行后停止（如您在日志记录中所见）：

    if (getRows('.item p') === 1) {
}

  • 当我在该函数中记录结果时，我得到了 Window 对象，我需要特定的 div 来添加类，以便可以正确定位我的绝对链接

所以结果是绝对链接应该根据行数定位。

是的，我知道这段代码可以用不同的方式编写（就像只是将绝对链接放在我的 p.. 下）但它是 CMS 呈现它的方式，这将是最简单的解决方法.. 如果您想查看结果你可以在第一个项目 div 上添加 item_1，在第二个项目上添加 item_2，依此类推。

演示：http: //jsfiddle.net/pndJx/

if (getRows('.item p') === 1) {
console.log('1 line');
console.log(this);
}

if (getRows('.item p') === 2) {
console.log('2 lines');
}

if (getRows('.item p') === 3) {
console.log('3 lines');
}
4

3 回答 3

2

以这种方式编写您的代码

$('.item p').each(function() {
   var $this = $(this),
       rows  = getRows($this);

   console.log('%d lines', rows);

   /* add class */
   $this.parent().addClass('item_' + rows);

});

小提琴示例：http: //jsfiddle.net/jSevE/

于 2013-04-09T16:00:30.663 回答
2

您应该使用每个语句：http: //jsfiddle.net/astynax777/pndJx/1/

$('.item p').each(function() {
    var rows = getRows(this);
    switch (rows)
    {
        case 1:
            console.log('1 line');
            break;
        case 2:
            console.log('2 lines');
            break;
        case 3:
            console.log('3 lines');
            break;
    };
});

function getRows(selector) {
    var height = $(selector).height();
    var font_size = $(selector).css('font-size');
    var scale = 1.50
    var line_height = Math.floor(parseInt(font_size) * scale);
    var rows = height / line_height;
    return Math.round(rows);
}
于 2013-04-09T16:02:46.253 回答
0

听起来您想为每个<div>单独运行该逻辑。如果是这种情况，那么我建议这样做：

function getRows(selector, context) {
    var height = $(selector, context).height();
    var font_size = $(selector, context).css('font-size');
    var scale = 1.50
    var line_height = Math.floor(parseInt(font_size) * scale);
    var rows = height / line_height;
    return Math.round(rows);
}

$('div.item').each(function () {
    if (getRows('.item p', this) === 1) {
        // if ".item p" equals 1 then add class "item_1" to item div
        console.log('1 line');
        console.log(this); //if i log this i get window (the document), but I need to get the specific div to add the class..
    }

    //console gives back result '1 line' since true and does not continue..

    if (getRows('.item p', this) === 2) {
        // if ".item p" equals 2 then add class "item_1" to item div
        console.log('2 lines');
    }

    if (getRows('.item p', this) === 3) {
        // if ".item p" equals 3 then add class "item_1" to item div
        console.log('3 lines');
    }
});

在传递给的匿名函数的上下文中.each() this是指该特定<div>元素，而不是window.

于 2013-04-09T16:00:52.730 回答