jQuery .eq (x) возвращает другой элемент в IE, чем в FF / Chrome - PullRequest
Новая
       18

jQuery .eq (x) возвращает другой элемент в IE, чем в FF / Chrome

4 голосов
/ 09 марта 2010

Я использую метод .eq (), чтобы выбрать определенный дочерний элемент известного элемента. Похоже, что индексы элементов различаются в IE и в Chrome / FF, так как .eq (2) возвращает разные значения в зависимости от браузера. (Элемент, который я ищу, отображается как .eq (2) в FF / Chrome, но .eq (3) в IE)

Например, 

alert($(this).parent().children().eq(2).text());

показывает разные результаты в зависимости от браузера.

Вот разметка, о которой идет речь: 

<div>
  <span>
    <input onclick="player.search.Groupings($(this).parent().children().eq(2).text(), $(this).parent().children().eq(0).is(':checked'));" type="checkbox"></input>
    <span>Fake Initiative A</span><span>1</span>
  </span>
  <span>
    <input onclick="player.search.Groupings($(this).parent().children().eq(2).text(), $(this).parent().children().eq(0).is(':checked'));" type="checkbox"></input>
    <span>Initiative B Not Real</span><span>2</span> </span>
</div>

(Я убрал атрибуты, встроенный CSS и т. Д. - то же самое происходит без них).

Есть ли лучший способ сделать это?

1 Ответ

7 голосов
/ 10 марта 2010

Мне следует подумать, что это связано с пустыми текстовыми узлами, Firefox не будет регистрировать пробел между, скажем, тегом и , где, как IE, так и для FF второй узел будет тегом (), где он будет текстовым узлом ( -пустой текстовый узел- ).

EDIT:

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

Если вы измените свой код на короткие закрывающие теги, например: 

<div>
  <span>
    <input type="checkbox" />
      <span>Fake Initiative A</span><span>1</span>
  </span>
  <span>
    <input type="checkbox" />
    <span>Initiative B Not Real</span><span>2</span>
  </span>
</div>

Тогда это должно работать как предсказано.

Просто для справки весь мой тестовый скрипт (только с предупреждением о тексте): 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
    <title>Title here!</title>
    <script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/Javascript">
        $(function(){
            $("input:checkbox").bind('click', function(){
                alert($(this).parent().children().eq(2).text());
            });
        }); 
    </script>
</head>
<body>
<div>
  <span>
    <input type="checkbox" />
    <span>Fake Initiative A</span><span>1</span>
  </span>
  <span>
    <input type="checkbox" />
    <span>Initiative B Not Real</span><span>2</span> </span>
</div>

</body>
</html>
...