CSSまたはJQUERYで、リスト項目の内容がリンクで始まるかどうかを確認します

Question

リスト項目がリンク付きでSTARTS（<li><a href="...）であるかどうかを確認するには、<li>Some text here: <a href="...のような項目内にリンクを埋め込む必要があります。私はCSSで簡単にやり方を見ることができないので、jQueryをどのように達成するのかと思っています。

Answer 1

.filter()を使用すると、機能テストを通過する要素を取得できます。テスト機能では、テキストノードを含む要素の.contents()をフェッチすることができます。ここでfirst()子ノードはNode.nodeTypeと比較できます。ここで

var liStartingWithAnchorElement = $('li').filter(function() { 
 
    var first = $(this).contents().first(); 
 
    return first.get(0).nodeType == Node.ELEMENT_NODE && first.is('a'); 
 
}); 
 
liStartingWithAnchorElement.addClass('highlight');

.highlight { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>Some text here: <a href="#">Yahooo</a> 
 
    </li> 
 
    <li><a href="#">Yahooo</a> 
 
    </li> 
 
    <li>Lorem Ipsum <a href="#">Lorem Ipsum</a> 
 
    </li> 
 
</ul>

.get(index)は、基礎となるDOM要素を取得するために使用されます。

Answer 2

それは<span>タグでラップするすべてのものを含み、これは（あなたの現在の状況に最適なソリューションではありませんが、私は今後の参考のためにこれを残している。しかも、それはCSSを使用して選択する方法があります。

li { 
 
    list-style: none; 
 
} 
 

 
li > a:first-child:before { 
 
    content: "\25B6"; 
 
    padding-right: 10px; 
 
    color: #000; 
 
    display: inline-block; 
 
    pointer: none; 
 
} 
 

 
li > span:first-child:before { 
 
    content: "\25CF"; 
 
    padding-right: 10px; 
 
}

<ul> 
 
    <li><span>Some text here:</span><a href="#">Yahooo</a></li> 
 
    <li><a href="#"><span>Yahooo</span></a></li> 
 
    <li><span>Lorem Ipsum</span><a href="#">Lorem Ipsum</a></li> 
 
</ul>

これは、アイテムの内容に基づいて、カスタマイズされたリストのアイコンがデフォルトのリストの要素を置き換えるの純粋なCSSの方法です。ただ、好奇心のうち