Невозможно получить смещение элемента

Question

Я пытаюсь получить смещение некоторых элементов, которые отлично работают для меня. Но проблема возникает, если идентификатор элемента содержит одинарные кавычки. Он выдает ошибку, например, если идентификатор элемента - это то, что не работает. Но если id - это what's_next, если я дал мне ошибку.

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

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

Также у меня нет доступа к HTML Я не могу изменить HTML. У вас, ребята, есть решение?

Вот мой код:

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

HTML элемента, где я щелкая:

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

HTML элемента смещения элемент:

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

Answer 1

Вы можете избежать ' с использованием 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

Вы не можете использовать ' символ внутри вашего div's id - Вы должны изменить

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

в

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

EDIT:

, потому что Вы не можете/не хотите, чтобы изменить идентификатор Div в Вы работаете на недействительный код. Вы должны сначала отладить его, чтобы продолжить работу.

EDIT 2:

Благодаря @Tibrogargan комментарий Я проверил рекомендации w3c, и он, вероятно, прав:

ID = ID Уникальный идентификатор для элемента. Не должно быть несколько элементов в документе с одинаковым значением id. Любая строка, со следующими ограничениями:

• должен быть по крайней мере один символ длиной
• не должен содержать пробелы

Источник: w3c.org

Answer 3

Вы пробовали идти для идентификатора в качестве атрибута подход?

Как это:

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

Ну я попробовал, и это не работает :) - Cudos к Garvit, он это право, это его решение (только упрощенный):

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

Answer 4

Вот еще один способ сделать это, не избежать цитаты, хотя она требует от вас, чтобы удалить хэш из передней части HREF (а также, используя $ («*») медленно)

$('.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());