如何根据当前元素的属性设置jQuery插件选项？

Question

I am setting up tooltips using qTip . I am wondering how can I set an option based on a attribute of the current element?

$('*[data-tip]').qtip({ // enable qTip on all elements that has the attribute 'data-tip'
    content: this.attr('data-tip'); // I can't get this to work, is it possible?
});

Answer 1

You need to use a .each() to have access to each element (as this ), like this:

$('*[data-tip]').each(function() {
  $(this).qtip({
    content: $(this).attr('data-tip');
  });
});

However , *[data-tip] is a very expensive selector (and can just be [data-tip] ), if you can narrow it down so it's not checking for the attribute on every DOM element it would be much faster.

Also, in jQuery 1.4.3+, you can replace $(this).attr('data-tip') with $(this).data('tip') , which looks at the data- attributes (if the key isn't present in the data object).