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

这样的事情：

jsFiddle

＆＃13;

$('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);
})

＆＃13;

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

＆＃13;

Answer 2

$("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
});

检查元素是否仅包含没有任何文本的其他元素

2 个答案: