如何获得div元素的title属性?

I'm trying to write a Greasemonkey script. There is something like this in a webpage:

我正在写一个Greasemonkey脚本。网页上有这样的东西:

<div id="div1" class="..." title="
  asdsadsadasd&nbsp;&lte;...
">...</div>

I want to get its title using jQuery attr method. But it returns an empty value. My js code is like this:

我想用jQuery attr方法获取它的标题。但它返回一个空值。我的js代码是这样的:

$("#div1").attr("title");

I've tried alert in many different ways and I'm sure that the required element is selected properly and all other attributes are fine! Just this one returns empty string! ( '' ) Does it have something to do with being multiline?

我尝试了许多不同的方法来尝试alert，我确信所需要的元素被正确地选择并且所有其他属性都是好的!这个返回空字符串!()这和多线有关系吗?

More details: I'm using latest jQuery (1.8.2) and my browser is Firefox 16.0.1. I saw this link and it worked there! So maybe it's because something else. Actually I'm coding in a Greasemonkey script which is altering a webpage that is not mine to edit. So editing the HTML code is not possible.

更多细节:我使用的是最新的jQuery(1.8.2)，而我的浏览器是Firefox 16.0.1。我看到了这个链接，它在那里起作用了!也许是因为别的原因。实际上，我正在用Greasemonkey脚本编写代码，它正在修改一个不是我要编辑的网页。所以编辑HTML代码是不可能的。

5 个解决方案

#1

The title is blank because it (or most likely the <div>) is added via AJAX, after the Greasemonkey script fires.

标题是空的，因为它(或者很可能是

)是通过AJAX添加的，在Greasemonkey脚本触发之后。

Use the waitForKeyElements() utility to handle this kind of situation.

使用waitForKeyElements()实用程序处理这种情况。

Here is a complete script that uses jQuery and waitForKeyElements to grab that title:

下面是一个完整的脚本，使用jQuery和waitForKeyElements获取该标题:

// ==UserScript==
// @name     _Grab element's title, when it is added by AJAX
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle   
// ==/UserScript==
/*- The @grant directive is needed to work around a design change introduced
    in GM 1.0.   It restores the sandbox.
*/

function grabDivTitle (jNode) {
    //***** YOUR CODE HERE *****
    var titleStr    = jNode.attr ("title");
    console.log ("Title is:", titleStr);
}

waitForKeyElements ("#div1", grabDivTitle);

#2

title isn't a valid attribute for div, but should still work. If you can change the html easily you could use:

title不是div的有效属性，但仍然可以工作。如果您可以轻松地更改html，您可以使用:

<div id="div1" class="..." data-title="
  asdsadsadasd&nbsp;&lte;...
">...</div>

alert( $("#div1").data("title"));

Also make sure you are wrapping code in document.ready so element exists when code fires. I suspect this may be your problem

还要确保在文档中包装代码。当代码触发时，so元素已经存在。我怀疑这可能是你的问题

$(function(){
/* your code*/

})

#3

I had a similar issue, but it seemed to be caused by the jquery ui tooltip functionality. I ended up having to add another attribute to the element that had nothing to do with jquery ui. I used the alt element, but if you're already using that you can use something like data-alt.

我有一个类似的问题，但它似乎是由jquery ui工具提示功能引起的。最后，我不得不向元素添加另一个与jquery ui无关的属性。我使用了alt元素，但如果你已经使用了，你可以使用data-alt。

<a class="tooltip" 
    title="this will show up in the tooltip and may cause trouble using title later on" 
    data-alt="Grab this attribute instead of the title to bypass jqui showing the title attr as an empty string"
/>
<script>
    $(".tooltip").tooltip();
    a.click(function(){
        var title = $(this).attr('title'); // this showed up as an empty string
        title = $(this).attr('data-alt'); // this showed up as the text I was expecting
    });
</sctipt>

#4

The problem may be related to the jquery version.

问题可能与jquery版本有关。

It is running with Jquery.1.8.2. successfully. I tried with chrome and ie9.

它使用Jquery.1.8.2运行。成功。我尝试过chrome和ie9。

http://jsfiddle.net/LgkhW/2/

http://jsfiddle.net/LgkhW/2/

#5

Looks like a bug:

看起来像一个错误:

$("<div>").attr("tilte","dyanmic").addClass("test").appendTo("body");
alert($("#div1").attr("title"));
alert($(".test").attr("title"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="..." title="static">...</div>

#1