Как различить содержание HTML / текстовых кнопок с помощью jquery

0

Мне нужно уметь различать следующие три стиля кнопки:

<button>Something</button>

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

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

Я попытался использовать html().length и Is('i') что позволяет мне отличать первое и другие, но не уверен в лучшем подходе, чтобы определить, является ли контент только значком или если есть текст.

  • 0
    i устарела. Что не так с добавлением класса CSS и font-style: italic ? Когда вы добавляете класс, вы также можете различать случаи. 3-й пустой случай выглядит как задание для display: none;
  • 0
    меня просто используют в качестве плацхолдера для шрифта глифа - в данном случае это потрясающе.
Показать ещё 4 комментария
Теги:

3 ответа

3
Лучший ответ

$(this).children().length > 0 вернет true в случае 2 и 3.

$(this).text().length > 0 вернет true в случае 1 и 2.

Используйте их в комбинации.

Поделиться
1

Вы можете сделать что-то подобное. Мой пример просто меняет цвет фона кнопки, но, очевидно, вы можете изменить это, чтобы делать все, что вам нравится.

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

Поделиться
0

Чтобы проверить, есть ли у кнопки какой-либо элемент html:

$("button").each(function(i){
    index = i+1;
    htmlElements = $(this).find("*");
    if(htmlElements.length > 0){
        alert("Button no. "+index+" has an html object");
    }
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню