jQuery on click redirect to child href attribute

Question

Я пытаюсь связать один div с атрибутом href его первого <a> href.
Мой HTML выглядит следующим образом

<div class="clicked"> 
<a class="i-want-this-href" href="target"> 
    <img> 
</a> 
<a class="this-one-is-useless" href="Wrong-target"> 
    <img> 
</a> 
</div> 

И я испытал несколько различных способов, как это:

$('.clicked').on('click',function(){ 
    aux= $('this:first-child').attr("href"); 
    console.log(aux); 
}); 

Но я всегда получаю Undefined на консоли. И я хочу получить «цель» внутри первого элемента <a>.

Любая помощь будет оценена!

Answer 1

Ваш селектор неверен, вы можете использовать .find()/.children() вместе с :first Селектор

aux= $(this).find('a:first').attr("href"); 

Answer 2

Используйте this контекст вместе с :first-child Селектор

$('.clicked').on('click', function() { 
 
    var href = $(this).find('a:first-child').attr("href"); 
 
    console.log(href); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="clicked"> 
 
    <a class="i-want-this-href" href="target"> 
 
    <img> 
 
    </a> 
 
    <a class="this-one-is-useless" href="Wrong-target"> 
 
    <img> 
 
    </a>

Answer 3

Неправильный селектор, если вы хотите t о использовать это в селекторе вы должны передать его separared следующим образом:

var aux = $('a', this).prop("href"); 
//Or 
var aux = $(this).find('a').prop("href"); 

Примечание: Jquery по умолчанию будет выбрать первое вхождение.

Надеюсь, это поможет.

$('.clicked').on('click',function(){ 
 
    var aux = $('a', this).prop("href"); 
 
    console.log(aux); 
 
});

.clicked{ 
 
    width:100%; 
 
    height:100px; 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="clicked"> 
 
    <a class="i-want-this-href" href="target"> 
 
    Image 1 
 
    </a> 
 
    <a class="this-one-is-useless" href="Wrong-target"> 
 
    Image 2 
 
    </a> 
 
</div>

Answer 4

1) Не используйте this в селекторов, это должно быть передано $ отдельно

2) Убедитесь в том, чтобы объявить переменную как локальный, в противном случае будут ошибки.

3) Использование first-of-type

$('.clicked').on('click',function(){ 
    var aux = $(this).find('a:first-of-type').attr("href"); 
    console.log(aux); 
}); 

Answer 5

$('.clicked').on('click',function(){ 
    aux= $(this).find('a:first-child').attr("href"); 
    console.log(aux); 
});