jquery - jQuery - 特定のクラスの親のみを持つ画像の属性値を選択

Question

次のようなリストがあります。

<ul>
    <li><div class="thumb"><img src="image-1.jpg"></div></li>
    <li><div class="thumb"><img src="image-2.jpg"></div></li>
    <li><div class="thumb selected"><img src="image-3.jpg"></div></li>
</ul>

class= "selected" の div 親を持つ img の src 属性を選択するにはどうすればよいですか?

Answer 1

現在のsrc値を取得するには:

var selectedSrc = $("div.selected img").attr("src")

を変更するにはsrc:

$("div.selected img").attr("src", "someImage.jpg");

(セレクターはその div 内のすべての"div.selected img"画像を返すことに注意してください。これは 1 つしかないため問題ありません。複数ある場合は、最初の画像のみを返しますが、すべてを変更します。).attr("src")src.attr("src", "SomeImage.jpg")

Answer 2

簡潔な答えの代わりに、を選択してimgからフィルター処理するオプションがあります。

$('img').filter(function() {
    return $(this).closest('div.selected').length;
}).attr('src');

しかし、jsPerf が示すように、これはそれほど効率的ではありません。

参考文献:

• attr().
• filter().

Answer 3

$(".thumbselected").children("img").attr("src");

クラス.thumbselectedを選択し、その子を選択してimg、src.