Question

我试图将一个div与他的第一个<a> href的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。我想得到＆＃34;目标＆＃34;在第一个<a>元素内。

任何帮助将不胜感激！

Answer 1

您的选择器不正确，您可以使用.find() / .children()和:first选择器

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

Answer 2

使用this上下文和:first-child选择器

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

错误的选择器，如果你想在选择器中使用它，你应该按如下方式传递它：

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）确保将变量声明为local，否则会出现bug。

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);
});

点击重定向到子href属性的jQuery

5 个答案: