javascript - 選択中jQuery でテキスト ノードを持たない要素

Question

私はこのHTML構造を持っています:

<div class="article-body">
<p>
    <a href="http://www.example.com">My Link</a>
Lorem Ipsum Dolor Sit amet.

</p>
<p><a href="http://www.example.com">Link that I must select.</a></p>
</div>​

そして、テキスト ノードのない 2 番目のリンクにクラスを適用する必要があります。"p:empty a" と "p > a:only-child" を試しましたが、うまくいきません... jQuery を使用して選択する方法はありますか?

Answer 1

セレクターではできませんが、filter()カスタム選択を実行するために使用できます:

$('p').filter(function(){
    var $clone = $(this).clone();
    $clone.children().remove();
    return !$clone.text();
}).addClass("red");​

ここで、フィドルを持っています: http://jsfiddle.net/adrianonantua/5daYT/

:)

アップデート

@dfsq の提案に従って、end()これと同じロジックを利用して 1 行で作成できます。

$('p').filter(function(){
    return !$(this).clone().children().remove().end().text();
}).addClass("red");​

Answer 2

これは非常に迅速な解決策になります。クローン作成は不要:

$("p > a").filter(function(i, el) {
    return !el.previousSibling && !el.nextSibling;
}).parent();

---

またはこれ：

$("p").filter(function(i, el) {
    return el.firstChild && 
           el.firstChild === el.lastChild && 
           el.firstChild.nodeName.toUpperCase() === "A";
});

Answer 3

別のソリューションfilter()：

$("p").filter(function() {
    return $(this).contents().filter(function() {
        return this.nodeType == 3 && $.trim(this.nodeValue) != "";
    }).length == 0;
}).addClass("myClass")​;

デモ: http://jsfiddle.net/wyvLC/

Answer 4

これはhttp://jsfiddle.net/nvass/で動作するはずです:

$("p").filter(function(){
    return $.grep(this.childNodes,function(node){
         return node.nodeType === 3 && node.nodeValue.replace(/(\s|\n|\r|\t)/g,"") !== "";
    }).length === 0;
}).css("background-color","green");

Answer 5