如何在元素循环内获取元素的className？

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内所有元素的循环，我现在需要获取我循环的元素的类名。

然后我可以检查当前元素的类是其中之一，我需要做的东西......

// 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或纯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; 
    }); 
}); 

并请，不要”再次使用“做魔术”作为评论。这是令人难以置信的跛脚。

---

编辑。这可以做出更加有效（多余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); 
      } 
     } 
    } 
});