Question

我正在尝试创建一个给出divid和类列表的函数，然后在它们内部替换一些文本。

在了解了Firefox Dom如何以不同方式处理文本节点之后，我读到我必须使用javascript循环遍历元素，同步到nextSibling。

我在脚本中遇到的最后一个障碍是获取类名。我需要类名，以便我可以过滤掉替换文本的内容。

看了所有的答案，并在一位名叫Ryan的同事的帮助下，我们在jquery中重做了这个。

        $(divid).find(".status_bar").each( function() {
        var value = $.trim($(this).text());
        // if value is not defined thru browser bugs do not replace
        if (typeof(value) != 'undefined') {
            // it is a text node. do magic.
            for (var x = en_count; x > 0; x--) {
                // get current english phrase
                var from = en_lang[x];
                // get current other language phrase
                var to = other_lang[x];
                if (value == from) {
                    console.log('Current Value ['+value+'] English ['+from+'] Translation ['+to+']');
                    value = to;
                    $(this).attr('value', to);
                }
            }
        }
    });

除了替换文字外，目前适用于所有领域。

我最初在jQuery中执行此操作的原因，不得不确定我可以循环遍历元素，并避免firefox和文本节点的问题。

我正在对div中的所有元素进行循环，现在我需要获取我循环的元素的类名。

然后我可以检查当前元素的类是否为1，我需要做一些...

 // var children = parent.childNodes, child;
    var parentNode = divid;

    // start loop thru child nodes
    for(var node=parentNode.firstChild;node!=null;node=node.nextSibling){

    var myclass = (node.className ? node.className.baseVal : node.getAttribute('class'));

    }

但是这个获取类名的代码只能得到空值。

有什么建议吗？

对于那些试图弄清楚重点是什么的人，请阅读此JavaScript NextSibling Firefox Bug Fix我的代码可以使我的语言翻译适用于Google Chrome和IE。但是当我在Firefox中使用它并尝试在ajax加载后翻译div内容时，由于空白问题而失败。

我真的没有jQuery或Pure Javascript的偏好，我只想要一个有效的解决方案。

感谢大家的耐心等待。我个人认为我的描述非常清楚，如果不是，我道歉。我并不是想要晦涩难懂或者难以获得帮助。但请不要侮辱我，暗示我试图弄清楚它。

感谢。

Answer 1

嗯......你有jQuery但不使用它吗？

$(divid).children(".yourSpecialClassName").each( function() {
  doSomethingWith(this);
});

要获取CSS类属性值，请执行以下操作：

$(divid).children().each( function() {
  alert(this.className);
});

根据您现在发布的功能，您需要：

$(divid).find(".status_bar").each( function() {
  $(this).text( function(i, text) {
    var x = $.inArray(en_lang, $.trim(text));
    if (x > -1) {
      console.log('Current Value ['+text+'] English ['+en_lang[x]+'] Translation ['+other_lang[x]+']');
      return other_lang[x];
    }
    return text;
  });
});

请不要再使用“做魔法”作为评论。这太令人难以置信了。

EDIT。这可以提高效率（多余的console.log()删除）：

$(divid).find(".status_bar").each( function() {
  // prepare dictionary en_lang => other_lang
  var dict = {};
  $.each(en_lang, function(x, word) { dict[word] = other_lang[x]; });

  $(this).text( function(i, text) {
    var t = $.trim(text);
    return (t in dict) ? dict[t] : text;
  });
});

Answer 2

如果你使用的是jquery，你可以这样做：

$("#myDiv").find("*").each(
   function(){
      var myclass = $(this).attr("class");
   }
);

Answer 3

您的示例代码没有意义。

$(this).attr('value', to);

'value'是标签的属性，而不是文本内容。

你真的有意这样做吗？

$(this).text(to);

此外，您已经重新编辑了您的问题，但您仍在尝试使用非jQuery方法遍历子节点。你说“我在脚本中遇到的最后一个障碍，你看到了一小部分，正在获取类名。我需要类名，以便我可以过滤掉替换内容的内容。”

如果您使用的是jQuery，则完全没有必要循环访问任何类以获取类名。您只需要首先使用正确的selector。

 $(divid).find(".status_bar.replaceme").each( function() {  
    // .replaceme is whatever class you're using for the stuff you want to change
    // .status_bar.replaceme matches all elements with BOTH status_bar and replaceme classes

    var value = $.trim($(this).text());
    // if value is not defined thru browser bugs do not replace
    if (typeof(value) != 'undefined') {
        // it is a text node. do magic.


        // NOTE: The following is inefficient but I won't fix it. 
        //       You're better off using an associative array

        for (var x = en_count; x > 0; x--) {
            // get current english phrase
            var from = en_lang[x];
            // get current other language phrase
            var to = other_lang[x];
            if (value == from) {
                console.log('Current Value ['+value+'] English ['+from+'] Translation ['+to+']');
                // value = to;    <-- useless, get rid of it.
                $(this).text(to);
                // or $(this).html(to);
            }
        }
    }
});

如何在元素循环中获取元素的类名？

3 个答案: