jQuery advanced selector fails in Internet Explorer 8_问答_开发者

jQuery advanced selector fails in Internet Explorer 8

开发者 https://www.devze.com 2023-03-26 20:14 出处：网络

I\'m using a complex selector, and it works fine in Chrome and Firefox et al. but in Internet Explorer 8 it fails. I haven\'t tested it in older versions yet.

I'm using a complex selector, and it works fine in Chrome and Firefox et al. but in Internet Explorer 8 it fails. I haven't tested it in older versions yet.

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
    <html>
         &开发者_开发知识库lt;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>

To just put it in context, no, I can't add classes or IDs to the spans because the spans won't always be in the same spots, and I need to adjust the CSS based on their position (for other, uninteresting reasons, I can't edit the code to move them) , and I can't use external styles.

Is there something I'm missing to make this work in IE, and if not can you propose a work around?

Here's a JSFiddle http://jsfiddle.net/RMzuh/1/

Here's a workaround:

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

fiddle: http://jsfiddle.net/mrchief/RMzuh/16/

Also, notice that left:20px will have no effect unless you set positon:absolute; or similar.

Instead of the complex selector you could use .filter()

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

Updated jsfiddle

tested in IE9 and IE9 compatibility view (both failed with original fiddle)

I'm personally surprised that style matching the way you're doing it works at all. The presence of one space somewhere could throw it off. When I do getAttribute on the style attribute for those objects, there is a space after the colon and indeed if you put a space in your match string after the colon, your technique starts to work on IE9. That means, your technique is browser specific. Time for a better way to approach that.

I'd suggest you go with a more definitive workaround like Mrchief proposes.

You can see in this fiddle, that it works in IE9 and the previous one does not, but that new one doesn't work in Chrome - thus confirming that you need a different way.

You can't rely on the content of the style property to be exactly as the string that you use to set it. Internet Explorer normalises the style as left: 20px; width: 100%;, so the extra spaces keeps the jQuery selector from working.

If you use spaces after the colon in the style attribute and in the selector, it will work in both Internet Explorer, Firefox, Chrome and Opera (demo: http://jsfiddle.net/psfWN/1/), but I can't say anything about any other browsers, and it's very possible that you will find different behaviour in some browser out there. You simply can't rely on the formatting of the style to be in a specific way, so if it's an important function you should find a different approach.