1

设置：

我有一个嵌套的 html 表结构，它显示分层数据，并且用户可以隐藏或显示各个行。每行都有一个 dom id，它由级别号加上该级别上记录类型的主键组成。我必须两者都有，因为每个级别都来自不同的数据库表，所以单独的主键在 dom 中不是唯一的。

example: id="level-1-row-216"

我将可见元素的级别和行存储在 cookie 中，以便在页面重新加载时可以自动显示用户打开的相同行。我不存储 dom id 的完整映射，因为我担心它会变得过于冗长，并且我希望将我的 cookie 保持在 4Kb 以下。

所以我将 dom id 转换为像这样的紧凑 json 对象，每个级别都有一个属性，每个级别下都有一个唯一的主键数组：

{
    1:[231,432,7656],
    2:[234,121],
    3:[234,2],
    4:[222,423],
    5:[222]
}

将此结构存储在 cookie 中，我将其提供给我的 show 函数，并在页面加载时恢复用户之前的公开状态。

需要改进的地方：

我正在寻找更好的选择来减少我的 id 选择器映射到这种紧凑的格式。这是我的功能：

function getVisibleIds(){

    // example dom id: level-1-row-216-sub

    var ids = $("tr#[id^=level]:visible").map(function() {
        return this.id;
    });

    var levels = {};

    for(var i in ids ) { 
        var id    = ids[i];
        if (typeof id == 'string'){
            if (id.match(/^level/)){

                // here we extract the number for level and row
                var level = id.replace(/.*(level-)(\d*)(.*)/, '$2');
                var row   = id.replace(/.*(row-)(\d*)(.*)/, '$2');

                // *** Improvement here? ***
                // This works, but it seems klugy. In PHP it's one line (see below):

                if(levels.hasOwnProperty(level)){
                if($.inArray(parseInt(row, 10) ,levels[level]) == -1){
                        levels[level].push(parseInt(row, 10));
                }
                } else {
                    levels[level] = [parseInt(row, 10)];
                }

            }
        }
    }

    return levels;
}

如果我在 PHP 中执行此操作，我会像这样构建紧凑​​数组，但我无法在 javascript 中弄清楚：

foreach($ids as $id) {
    if (/* the criteria */){
         $level = /* extract it from $id */;
         $row   = /* extract it from $id */;
         $levels[$level][$row];
    }
}
4

3 回答 3

2

所以你的函数中有一些重复/不需要的东西：

如果你这样做

var ids = $("tr#[id^=level]:visible").map(function() {

还有这个

for(var i in ids ) {

你在匹配的 id 上循环了两次

这里不是 id 总是一个字符串吗？？？

if (typeof id == 'string'){

这不应该是必要的，因为您的 jQuery-Selector: "tr#[id^=level]:visible" 您的匹配元素应始终以 'level' 开头

if (id.match(/^level/)){

总而言之，我认为这应该更短（无法测试，请下次提供一个 jsfiddle，会更容易;-)）

function getVisibleIds(){

  // example dom id: level-1-row-216-sub
  var level, parsed, levels = {};

  $("tr#[id^=level]:visible").map(function() {
    // here we extract the number for level and row
    level   = this.id.replace(/.*(level-)(\d*)(.*)/, '$2');
    parsed  = parseInt(this.id.replace(/.*(row-)(\d*)(.*)/, '$2'), 10);

    // i like this more
    if(!levels.hasOwnProperty(level)) { levels[level] = []; }            
    if($.inArray(parsed, levels[level]) === -1) {
        levels[level].push(parsed);
    }
  });

  return levels;
}
于 2012-11-29T11:10:18.677 回答
2

我的尝试

function getVisibleIds() {

    var parts, level, row, levels = {};

    var ids = $("tr#[id^=level]:visible").each(function (index, el) {

        parts = el.id.split("-"); // no regex :)
        level = parts[1];
        row = parts[3];

        if (!levels[level]) { levels[level] = []; }
        if ($.inArray(row, levels[level]) + 1) { levels[level].push(row); }

    });
    return levels;
}
于 2012-11-29T11:14:21.187 回答
1 
function getVisibleIds(){

    // example dom id: level-1-row-216-sub

    var levels = {};

    var ids = $("tr#[id^=level]:visible")
                    .map(function() {

                        return this.id;
                    })
                    .each(function (index, id) {

                        if (!id || typeof id !== 'string') {
                            return;
                        }

                        if (id.match(/^level/) === false) {
                            return;
                        }

                        var level = id.replace(/.*(level-)(\d*)(.*)/, '$2');
                        var row   = id.replace(/.*(row-)(\d*)(.*)/, '$2'),
                            primaryKey = parseInt(row, 10);

                        if (!levels[level]) {
                            levels[level] = [];
                        }

                        var arr = levels[level];

                        if (arr.indexOf(primaryKey) === -1) {
                            levels[level].push(primaryKey);

                        }
                    });

    return levels;

}

需要注意的关键点是，您可以使用. (dot notation)或作为访问器访问对象的属性[]。

于 2012-11-29T11:02:10.263 回答