具有屬性長度的JQuery HasAttribute選擇器

當前我正在爲我的網站開發自定義工具提示。這是一個沉重的問題，所以它在每個頁面上都有大約300個標題。和它的使用此代碼正常工作：具有屬性長度的JQuery HasAttribute選擇器

var title=""; 
    $(document).delegate("[title]", "mouseover", function (event) { 
     title = $(this).attr("title"); 
     $("#tooltip-div").delay(250).animate({ top: newTop, opacity: 1 }, 'fast'); 
    });

但我面臨的問題是：遺憾的是，其中有title屬性，但空頁的許多元素。例如：

<input type="image" id="clearBtn" title="" src="../../Images/unsearch.png" onclick="clearFilter();">

對於此元素，我的自定義工具提示顯示爲空值。所以我想知道是否有任何方法來選擇具有「標題」屬性和屬性不爲空的元素。

所以我想排除像上面顯示的那些元素。有沒有辦法直接使用JQuery Selector來做到這一點，以確保我只將事件綁定到我期望的元素上，其他方法是檢查事件處理函數內部title屬性的長度。

在此先感謝。這是我在StackOverflow上的第一個問題。讓我知道如果我錯過了什麼。

來源

2012-12-03 Akhil Sekharan

這是一個可能的解決方案，需要一個[title]和一個[title!='']。

var title=""; 
$(document).delegate("[title][title!='']", "mouseover", function (event) { 
    title = $(this).attr("title"); 
    $("#tooltip-div").delay(250).animate({ top: newTop, opacity: 1 }, 'fast'); 
});

來源

2012-12-03 04:32:28

+1好用！= –

乾杯，@Shree - 測試過它，並且'[title]'選擇器和'[title！='']'選擇器都是必需的。使用'[title！='']選擇器將匹配所有沒有標題的元素。 –

很棒的回答。謝謝 –

以前的解決方案（類似於使用:not selector from CSS 3）是有效的，但它沒有考慮以下情況（See example at jsfiddle）：

<a href="#" title=' '>anchor 1</a> 
<span title=' '>anchor 2</span>

所以，如果你想要做的徹底檢查標題值，你就可以使用長度和修剪，但使用jquery每個方法：

$('[title]').each(function() { 
    var title = $(this).attr('title').trim(); 
    if (title =! '') { 
    $(this).on("mouseover", function(event) { 
     title = $(this).attr("title"); 
     $("#tooltip-div").delay(250).animate({ top: newTop, opacity: 1 }, 'fast'); 
    }) 
    } 

});

另外，還要注意As of jQuery 1.7, delegate method, has been superseded by the .on() method

來源

2012-12-03 05:06:05 rmaceissoft

感謝您的興趣。但最後的解決方案解決了我的問題。 +1; –

具有屬性長度的JQuery HasAttribute選擇器

回答

相關問題