jQuery Code is working on Google Chrome but not Firefox,IE and even Safari

Question

Hi everyone,

I wrote this code and it is working nicely in Google Chrome but when it comes to Firefox and other major browsers, it is not even changing a little bit thing :

jQuery("div[style*='line-height:25px']").contents(":not(nodeType!='1',br)").wrap("<div style='margin-bottom:9px;line-height:normal;margin-top:4px'>");
jQuery("div[style*='line-height:25px'] br").remove();

It may look a bit weird but it is the thing I want to solve a really frustrating problem, so anyways let me give you the specifications about the system :

• jQuery 1.3.2 with noConflict() method to avoid conflicts with prototype $
• Scriptaculous 1.7.1_beta3
• Prototype 1.5.1
• And yeah I am using jQuery(document).ready() function to do things after DOM is ready.

Those are the libraries also embedded on the page.

For Recommendations: I didn't develop this page and other hundred of pages like this one and the problem is they are all static pages and using shtml to at least share some common code. But I can't remove any of those libraries because it means I will have to edit a lot of pages and it will cost me weeks. So actually what I am looking is temporary solutions like the one above.

Thanks in advance.

Partial HTML :

<div style="font-size: 13px; line-height: 25px;">
  <!-- BULLETS MORE -->
  <div style="line-height: normal;">
    Fine quality, full grain pebble leather
  </div>
   Smooth Classic Napa leather construction
  <br />
   Lateral footprint with top access
  <br />
   Durable belt clip
  <br />
   Top flap with snap closure for added security
  <br />
   Soft velvet lining with light protective layer
  <br />
   Bottom push-through cutout for easy Motorola Droid removal
  <br />
   Simple Scandinavian rounded design
  <br />
   Sena craftsmanship and quality
  <br />
</div>

Answer 1

I don't think your contents selector is setup correctly. You should do something like:

jQuery("div[style*='line-height:25px']").contents(":not(br)").filter(function(){return this.nodeType != 1;}).wrap("<div style='margin-bottom:9px;line-height:normal;margin-top:4px'>");
jQuery("div[style*='line-height:25px'] br").remove();

Answer 2

Dont use ' in the selector, just:

jQuery("div[style*=line-height:25px]")

Answer 3

How about rewriting them slightly?

jQuery("div").filter(lineHeight).contents(nonElementNodes).wrap("<div style='margin-bottom:9px;line-height:normal;margin-top:4px'>");

jQuery("div").filter(lineHeight).find("br").remove();

function lineHeight() {
  return this.style.lineHeight == "25px";
}

function nonElementNodes() {
  return this.nodeType !== 1 || this.tagName !== 'BR';
}

Answer 4

yikes. jquery lets you write some very powerful queries, but it doesnt mean that you should.

if you have control over the html you should add some classes where needed and replace that mess with some class selectors, it will work in all browsers and be faster to boot