Как мне получить классное имя элемента внутри цикла элементов?

Question

Я пытаюсь создать функцию, которая предоставила разделяемую и список классов, затем сделает некоторые текст, заменяющие внутри них.

Узнав о том, как Firefox DOM по-разному обрабатывает текстовые узлы, я прочитал, что мне пришлось использовать JavaScript для петли через элементы, бравшими к Nextsible.

Последнее препятствие, которое я имел в моем скрипте, из которых вы видите небольшую часть, получают классное значение. Мне нужно имя класса, так что я могу отфильтровать, какой контент заменит текст.

Посмотрев все ответы, а с помощью сотрудника по имени Райан на работе мы переделали это в 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 ошибка исправления У меня есть код, который делает мой язык перевод, который работает в Google Chrome и IE. Но когда я использую его в Firefox, и попытайтесь перевести контент Div после того, как AJAX загрузил его, он не удается из-за проблем пробела.

У меня действительно нет предпочтения jQuery или Pure javaScript, я просто хочу рабочее решение.

Спасибо всем за то, что они терпеливы. Я лично подумал, что я был чрезвычайно понятен в моем описании, я прошу прощения, если это не так. Я не пытался быть неясным или трудно получить помощь. Но, пожалуйста, не оскорбляйте меня, подразумевая, что я пытаюсь сделать это неясным.

Спасибо.

Answer 1

HM ... У вас есть 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);

«Значение» - это атрибут тега, а не контент текста.

Вы действительно имели в виду это сделать это вместо этого?

$(this).text(to);

Кроме того, вы повторно отредактировали свой вопрос, но вы все еще пытаетесь пройти петлю через детские узлы, используя методы не-jQuery. Вы сказали: «Последнее препятствие, которое у меня было в моем сценарии, из которых вы видите небольшую часть, получают классное значение. Мне нужно имя класса, чтобы я мог отфильтровать то, что заменено контент.

Если вы используете jQuery, это совершенно не нужна, чтобы зарегистрироваться через все, чтобы получить имя класса. Вам просто нужно использовать правильное селектор в первую очередь.

 $(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);
            }
        }
    }
});