Проверьте элемент содержит только один элемент без какого-либо текста

Question

Например: кнопка содержит только значок

<button><i>i</i> Foo</button> -- false 

<button><i>i</i></button> -- true 

<button> <i>i</i> </button> -- true 

Я попытался это до сих пор - https://codepen.io/anon/pen/WxWgZL

$($(this).html()).is('i'); 

$.trim($($(this).html()).remove('i'))); 

Вот что я закончил с благодарностью к @veerasuthan V

$('button[title]').filter(function(){ 
    var children = $(this).children().context.childNodes; 
    for(i = 0; i < children.length; i++) { 
     if (children[i] && children[i]['nodeType'] == 3) { 
      return false; 
     } 
    } 
    return true; 
}).tooltip(); 

Answer 1

$("button").each(function(index,element){ 
    console.log($(this).children().context.childNodes); 
    // here you can check if the array of element contains "text" element in it 
}); 

Answer 2

Что-то вроде этого:

jsFiddle

$('button').each(function() { 
 

 
    // if this button has <i> children return true, otherwise false 
 
    var check1 = ($(this).children('i').length > 0) ? true : false, 
 

 
    // if the trimmed text of this button after filtering out the "i" text is empty 
 
    // [means if it doesn't contain text other than the "i" in the icon] then return 
 
    // true, otherwise return false 
 
    check2 = ($(this).text().replace('i', '').trim() === '') ? true : false, 
 
    result = (check1 && check2) ? true : false; 
 

 
    console.log(result); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<button>a</button> <!-- false --> 
 
<button> <span>he</span> </button> <!-- false --> 
 
<button><i>i</i> Foo</button> <!-- false --> 
 
<button><i>i</i> </button> <!-- true --> 
 
<button> <i>i</i></button> <!-- true --> 
 
<button>sss</button><!-- false -->