专注于页面不工作

Question

如果存在CSS类，我试图将焦点设置在页面中的某个ID上。但是，我所拥有的代码并不起作用，我不确定为什么？

$(document).ready(function() {
    if ($('body').hasClass('message')) {
        $('#maincontent').focus();
    }
});

HTML： 页面中的锚点设置焦点：

<a name="maincontent" tabindex="-1" id="maincontent"/>

如果页面中存在此div：

<div class="message success"><p><span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span> Your submission has been received.</p></div>

Answer 1

所以，基本上你要做的就是去锚点，不要把元素集中注意力吧？因为你无法专注于空洞的＆＃34; a ＆＃34;元件。

要将焦点设置在锚点上，请尝试此

function goToAnchor(id) {
    var url = location.href;  //Save down the URL
    location.href = "#" + id; //Go to the anchor.
}​

然后你可以这样做

$(document).ready(function() {
    if ($('body').find('.message').length > 0) {
        goToAnchor('maincontent');
    }
});

要检查正文是否包含具有特定类的元素，请执行此操作

$('body').find('.message').length > 0

这是fiddle。

希望这有帮助，

Answer 2

将其更改为：

$(document).ready(function() {
    if ($('body .message').length) {
        $('#maincontent').focus();
    }
});

主体在您的HTML中没有类消息。

Answer 3

接受的答案效率低于应有的答案。它会搜索所有class="message"个元素，然后会根据body的后代对其进行过滤。由于body是jQuery搜索的默认范围，因此您应该只搜索.message并计算响应。

e.g。

$(document).ready(function() {
    if ($('.message').length) {
        $('#maincontent').focus();
    }
});

现代浏览器实现非常有效地按类搜索（几乎和ID选择器一样快），所以不妨只选择类选择器。

Answer 4

假设你有这样的Div

<div class="myClass" id="myElement"></div>

您可以使用

选择ID

$(document).ready(function() {
if($('#myElement').hasClass('myClass')) { 
//Some Code
}});