如何使用jQuery選擇一個沒有文本但內部是其他內容的特定元素？

Question

我有以下結構動態地添加到身體：

<ul> 

<li> 
    <h5>Option 1 <img src="..." alt="..."></h5> 
</li> 

<li> 
    <h5>Option 2 <img src="..." alt="..."></h5> 
</li> 

<li> 
    <h5><img src="..." alt="..."></h5> 
</li> 

<li> 
    <h5>Option 4 <img src="..." alt="..."></h5> 
</li> 

</ul> 

正如你所看到的，他們都是一樣的，除了事實，有時其中一人將不會有一個標題，但仍然有img，這對所有人都是一樣的。有沒有什麼辦法可以用Jquery只選擇上面例子中的第三個li，所以當它發生時我可以添加一個通用的文本？

Answer 1

要實現此目的，您可以使用contents()來檢查h5元素的第一個子元素是否爲textNode。如果不是，那麼你可以prepend()任何你需要的價值。試試這個：

var $h5 = $('li h5'); 
 
$h5.filter(function() { 
 
    return $(this).contents()[0].nodeType != 3; 
 
}).prepend(function() { 
 
    return 'Option ' + ($h5.index(this) + 1); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <h5>Option 1 <img src="..." alt="..."></h5> 
 
    </li> 
 
    <li> 
 
    <h5>Option 2 <img src="..." alt="..."></h5> 
 
    </li> 
 
    <li> 
 
    <h5><img src="..." alt="..."></h5> 
 
    </li> 
 
    <li> 
 
    <h5>Option 4 <img src="..." alt="..."></h5> 
 
    </li> 
 
    <li> 
 
    <h5><img src="..." alt="..."></h5> 
 
    </li> 
 
    <li> 
 
    <h5><img src="..." alt="..."></h5> 
 
    </li> 
 
    <li> 
 
    <h5><img src="..." alt="..."></h5> 
 
    </li> 
 
</ul>