javascript - 如何使用 jquery 区分 html/文本按钮内容

Question

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

<button>Something</button>

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

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

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

Answer 1

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

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

结合使用它们。

Answer 2

你可以做这样的事情。我的例子只是改变了按钮的背景颜色，但显然你可以改变它来做任何你喜欢的事情。

// 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/

Answer 3

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

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