Выбор тега в определенном теге с помощью Javascript - PullRequest
Новая
       0

Выбор тега в определенном теге с помощью Javascript

0 голосов
/ 14 февраля 2011

У меня две проблемы с небольшим пользовательским скриптом для chrome, который я пытаюсь собрать. Цель состоит в том, чтобы найти и собрать информацию из форума. Структура HTML похожа на следующую: 

<div class="wrapper">
 <div class="cfInnerWrapper">
  <div class"inner" title="user1">user1</div>
  <div class="cfMessage">
   <div class="message">  
    This is a message. <strong>the important information 1</strong>
   </div>
  </div>
 </div>
</div>
<div class="wrapper">
 <div class="cfInnerWrapper">
  <div class"inner" title="user2">user2</div>
  <div class="cfMessage">
   <div class="message">  
    This is a message. <strong>the important information 2</strong>
   </div>
  </div>
 </div>
</div>

Я хочу получить только важное сообщение внутри и подключить его к пользователю, который его произносит. Важное сообщение также должно содержать определенную строку, но это не проблема здесь. Я делаю это, находя все cfInnerWrapper и затем просматривая их один за другим, выбирая важную пару сообщение-пользователь и сохраняя их в массив. Это мой JS: 

window.onload = function(){
 var find_str = /important/mi;
 var votes = new Array();
 var message = document.getElementsByClassName('cfInnerWrapper');
 for (m in message){
  var strong_element = message[m].getElementsByTagName('strong'); <---- Error
  if(strong_element){
   var strong_content = strong_element[0].innerHTML;
   if(strong_content.match(find_str)){
    var message_user = message[m].getElementsByClassName('inner')[0].getAttribute('title');
    votes[message_user] = strong_content;
   }
  }
  alert(votes['user1']); <--- Works
 }
 alert(votes['user1']); <--- Doesn't work
}

Хорошо, это действительно работает. Но мои браузеры, т.е. Chrome, говорят, что это ошибка, когда я их показываю. Есть ли лучший способ выбрать тег из определенного тега?

Следующая проблема заключается в том, что сохраненный массив по какой-то причине не сохраняется вне цикла for. Когда я оповещаю содержание голосования в цикле for, я могу получить доступ к информации. Когда я пытаюсь сделать это извне цикла, это не работает вообще. Я не понимаю почему.

1 Ответ

1 голос
/ 14 февраля 2011

  • Во-первых, вы используете for (item in collection) конструкцию над массивом или массивоподобный (в данном случае NodeList) объект, который является основной причиной вашей ошибки.

    Этоэто неправильный способ, и он будет выдавать ошибку при переходе к свойству length, которое является числом, а не элементом.

    Вместо этого вам нужно использовать цикл forили преобразовать его в массив, а затем forEach на нем.

  • Вы храните votes внутри массива, но вы используете его как ассоциативный массив, вы должны хранить ихвместо объекта.

    Обратите внимание, что вы можете использовать [] для создания нового массива и {} для создания нового объекта.Я упоминал об этом, потому что вы использовали new Array().

  • Использование querySelector и querySelectorAll делает ваш код немного короче!Вы создаете пользовательский скрипт Chrome, и Chrome уже поддерживает его.

Итак, вот улучшенный код, который более читабелен и работает. jsFiddle 

var messages = document.querySelectorAll('.cfInnerWrapper'),
    votes = {},
    pattern = /important/i;

// for each message
for (var i = 0; i < messages.length; i ++) {

    var message = messages[i],
        user = message.querySelector('.inner[title]'),
        strong = message.querySelector('strong');

    // check that the elements exist
    if (user && strong) {

        var userName = user.getAttribute('title'),
            content = strong.innerHTML;

        // check if it matches the pattern
        if (pattern.test(content)) {
            votes[userName] = content;
        }

    }

}
...