JQuery / Firefox странная вещь, добавив .html к селектору (минимальный пример включен) - PullRequest
Новая
       8

JQuery / Firefox странная вещь, добавив .html к селектору (минимальный пример включен)

1 голос
/ 10 февраля 2012

Hy там

У меня странная проблема с Firefox, и я не нашел ни одного решения, которое помогает.Ниже вы можете найти минимальный пример этого.Код отлично работает с Chrome, но Firefox не будет добавлять строки html во второй div (div.container # c2).Я не знаю почему - у кого-нибудь из вас были такие проблемы?Было бы здорово, если бы кто-нибудь дал мне подсказку.

Привет Рето 

<html>
  <!-- Minimal example: firefox selector problem -->
  <head>
  <style type="text/css">
    div.container { max-width: 300px; min-height: 100px; }
    #c1 { background-color: gray; }
    #c2 { background-color: yellow; }
  </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready( function() {
    for(i=1;i<=2;i++) {
      var target="body > div.container#c"+i+" > span";
      $(target+"#foo1").html("foo 1 is "+i); 
      $(target+"#foo2").html("foo 2 is "+i); 
      $(target+"#foo3").html("foo 3 is "+i); 
    } // End of for while
  }); // End of document.ready
  </script> 
  </head>
  <body>
  <div class="container" id="c1">
    <span id="foo1"></span><br>
    <span id="foo2"></span><br>
    <span id="foo3"></span><br>
  </div>
  <div class="container" id="c2">
    <span id="foo1"></span><br>
    <span id="foo2"></span><br>
    <span id="foo3"></span><br>
  </div>
  </body>
</html>

Ответы [ 2 ]

1 голос
/ 10 февраля 2012

Проблема может заключаться в том, что вы используете один и тот же идентификатор для более чем одного элемента, который не является допустимым HTML. Вам нужно будет использовать уникальные идентификаторы (или переключиться на использование классов), чтобы правильно идентифицировать элементы.

1 голос
/ 10 февраля 2012

id атрибуты должны быть уникальными. Замените id="foo1" и т. Д. На class="foo1" и т. Д. Затем замените # на точку, . (селектор класса).

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

  $(document).ready( function() {
      $('.container').each(function(i) {
          $(this).children('span').each(function(j) {
              $(this).html('foo' + j + ' is ' + i);
          });
      }); // End of main loop
  }); // End of document.ready

HTML (удалены ненужные атрибуты): 

  <div class="container">
    <span></span><br>
    <span></span><br>
    <span></span><br>
  </div>
  <div class="container">
    <span></span><br>
    <span></span><br>
    <span></span><br>
  </div>
...