Unable to get offset of an element

Question

I am trying to get offset of some elements which is working fine for me. But the problem occurs if element id contains single quotes. It throw an error, e.g, if the element id is whats_next its working fine. But if id is what's_next if gave me an error.

Error: Syntax error, unrecognized expression: #What's_Next

....value:null},t.error=function(e){throw new Error("Syntax error, unrecognized exp...

Also I don't have access over HTML I can not change the HTML. Do you guys have any solution for this ?

Here is my code:

$('.custom-toc li a').click(function(){
  var id = $(this).attr('href');
  console.log(id);
   console.log($(id).offset());
});

HTML of element where I am clicking:

<a rel="internal" href="#What's_Next">What's Next</a>

HTML of element offset element:

<span id="What's_Next"></span>
<h4 class="editable">What's Next2</h4>

Answer 1

You can escape ' using replace()

HTML:

    <div class="custom-toc">
   <ul>
      <li>
        <a href="#What's_Next">dddfs</a>
      </li>
   </ul>
</div>
  <span id="What's_Next">hello</span>
<h4 class="editable">What's Next2</h4>

JS :

 $('.custom-toc li a').click(function(){
  var id = $(this).attr('href').replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g,'\\$1');
  console.log(id);
   console.log($(id).offset());
});

Answer 2

Have you tried going for the id as attribute approach?

Like this:

var id = "What's Next";
var elem = $("span[id="+id+"]");

Well I tried, and it doesn't work :) - Cudos to Garvit, he has it right, this is his solution (only simplified):

  var id = $(this).attr('href');
  console.log(id);
  id = id.replace("'","\\'");
  console.log($("#"+id).offset());

Answer 3

Here's another way to do it without escaping the quote, although it requires you to remove the hash from the front of the href (and also, using $("*") is slow)

$('.custom-toc li a').click(function() {
var href = $(this).attr('href').substring(1);
var a = $("*").filter(
    function(index) {
        return $(this).attr('id') == href;
    }
);
console.log($(a[0]).offset());

Answer 4

You can't use the ' symbol inside your div's id - You should change

<span id="What's_Next"></span>

to

<span id="Whats_Next"></span>

EDIT:

because You can't/don't want to change div's id You are working on an invalid code. You should consider debugging it first to further work.

EDIT 2:

Thanks to @Tibrogargan comment I've checked the w3c recommendation and he's probably right:

id = ID A unique identifier for the element. There must not be multiple elements in a document that have the same id value. Any string, with the following restrictions:

• must be at least one character long
• must not contain any space characters

Source: w3c.org