Сбой расширенного селектора jQuery в Internet Explorer 8 - PullRequest
Новая
       1

Сбой расширенного селектора jQuery в Internet Explorer 8

0 голосов
/ 09 августа 2011

Я использую сложный селектор, и он отлично работает в Chrome и Firefox и др.но в Internet Explorer 8 это не удается.Я еще не тестировал его в более старых версиях. 

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
    <html>
         <head>
              <title>Title</title>
              <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'>            </script>
              <script type='text/javascript'>
                     $(function(){
                          $('span[style*="left:20px"][style*="width:100%"]').css({color:'red'});
                          $('#first').css({color:'blue'});
                     });
              </script>
         </head>
         <body>
              <span id='first' style='left:20px; width:100%;'>Should be red</span>
              <span id='second' style='left:30px; width:100%;'>Should be blue</span>
         </body>
    </html>

Чтобы поместить это в контекст, нет, я не могу добавить классы или идентификаторы в промежутки, потому что промежутки не всегда будут вте же точки, и мне нужно настроить CSS на основе их положения (по другим, неинтересным причинам, я не могу редактировать код для их перемещения), и я не могу использовать внешние стили.

Есть личто-то мне не хватает, чтобы заставить это работать в IE, и если нет, можете ли вы предложить обходной путь?

Вот JSFiddle http://jsfiddle.net/RMzuh/1/

Ответы [ 4 ]

1 голос
/ 09 августа 2011

Вот обходной путь: 

$('span').each(function() {
   if(this.style.left == "20px" && this.style.width == "100%") {
       $(this).css({color:'red'});
   }
});

скрипка: http://jsfiddle.net/mrchief/RMzuh/16/

Также обратите внимание, что left:20px не будет иметь никакого эффекта, если вы не установите positon:absolute; или аналогичный.

0 голосов
/ 09 августа 2011

Вы не можете полагаться на то, что содержимое свойства стиля будет точно таким же, как строка, которую вы используете для его установки.Internet Explorer нормализует стиль как left: 20px; width: 100%;, поэтому дополнительные пробелы не позволяют селектору jQuery работать.

Если вы используете пробелы после двоеточия в атрибуте style и в селекторе, он будет работать как вInternet Explorer, Firefox, Chrome и Opera (демо: http://jsfiddle.net/psfWN/1/),, но я не могу ничего сказать о других браузерах, и вполне возможно, что вы обнаружите другое поведение в каком-то браузере. Вы просто не можетеполагаться на форматирование стиля, чтобы оно было определенным образом, поэтому, если это важная функция, вы должны найти другой подход.

0 голосов
/ 09 августа 2011

Лично я удивлен, что стиль, соответствующий тому, как вы это делаете, работает вообще. Наличие где-то одного места может скинуть его. Когда я получаю getAttribute для атрибута style для этих объектов, после двоеточия есть пробел, и, если вы действительно ставите пробел в строке соответствия после двоеточия, ваша техника начинает работать в IE9. Это означает, что ваша техника зависит от браузера. Время для лучшего способа приблизиться к этому.

Я бы посоветовал вам пойти на более определенный обходной путь, как предлагает Мркиф.

Вы можете видеть в этой скрипке , что она работает в IE9, а предыдущая - нет, но эта новая не работает в Chrome - таким образом подтверждая, что вам нужен другой способ.

0 голосов
/ 09 августа 2011

Вместо сложного селектора вы можете использовать .filter()

$('span[style]').filter(function() {
    return this.style.left === "20px" && this.style.width === "100%";
}).css({
    color: 'red'
});

Обновленный jsfiddle

, протестированный в IE9 иПредставление совместимости с IE9 (оба не удалось с оригинальной скрипкой)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...