如何使用jquery消除html/文本按钮内容

How to disinguish html/text button content using jquery

本文关键字：文本 按钮 html 何使用 jquery 消除      更新时间：2023-09-26

我需要能够区分以下三种样式的按钮：

<button>Something</button>
<button><i class="icon-user"></i> Something</button>
<button><i class="icon-user"></i></button>

我尝试使用html().length和Is('i')，这使我能够区分第一个和其他，但不确定确定内容是否只是图标或是否有文本的最佳方法。

$(this).children().length > 0将在情况 2 和 3 中返回true。

$(this).text().length > 0将在情况 1 和 2 中返回true。

结合使用这些。

你可以做这样的事情。我的示例只是更改按钮背景颜色，但显然您可以更改它以执行任何您喜欢的操作。

// Case 1
$('button:not(:has(i))').css('background', '#00f');
$('button:has(i)').each(function () {
    var btn = $(this);
    if (btn.text().length > 0) {
        // Case 2
        btn.css('background', '#0f0');
    } else {
        // Case 3
        btn.css('background', '#f00');
    }
});

这里有一个小提琴显示它的工作原理：http://jsfiddle.net/SJDJD/

要检查按钮是否有任何 html 元素：

$("button").each(function(i){
    index = i+1;
    htmlElements = $(this).find("*");
    if(htmlElements.length > 0){
        alert("Button no. "+index+" has an html object");
    }
});
相关文章：