如何在元素循環內獲取元素的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); 
      } 
     } 
    } 
});