Получить атрибут href от дочернего jQuery сиблинга?


Я использую следующий код, чтобы попытаться получить данные href из другого элемента, он продолжает возвращать "неопределенный" что я делаю не так?

$('.linkbutton').bind('click', function(e) {
        e.preventDefault();
        var flagURL = $(this).siblings().next('.flag-action').attr('href');
        console.log(flagURL);
    });
<div class="linkbutton">
<h4 class="quoteflag">
    <a href="/demo/url/here" title=" " class="flag-action">
    </a>
</h4>
4 2

4 ответа:

Вместо

var flagURL = $(this).siblings().next('.flag-action').attr('href');

Попробуйте следующий код:

var flagURL = $(this).siblings().find('.flag-action').attr('href');

, поскольку следующий() селектор возвращает следующий одноуровневый элемент. Но тебе нужен ребенок следующего брата. Селектор Find() даст вам все потомки определенного элемента. В вашем случае вы также можете использовать селектор children() вместо find (), так как вы пытаетесь найти непосредственного потомка элемента H4.

Вам придется использовать .find(), а не .next(), потому что этот flag-action является дочерним, а не элементом рядом с вашим quoteflag

$('.linkbutton').bind('click', function(e) {
  e.preventDefault();
  var flagURL = $(this).siblings().find(".flag-action").attr("href");
  console.log(flagURL);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="linkbutton">click</div>
<h4 class="quoteflag">
  <a href="/demo/url/here" title=" " class="flag-action">
  </a>
</h4>

Вы можете получить href, используя find('.flag-action'), так как a является потомком .linkbutton, например:

$('.linkbutton').bind('click', function(e) {
        e.preventDefault();
        var flagURL = $(this).find('.flag-action').attr('href');
        alert(flagURL);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="linkbutton">Click here
<h4 class="quoteflagdiv">
    <a href="/demo/url/here" title=" " class="flag-action">
    </a>
</h4>

$('.linkbutton').bind('click', function(e) {
        e.preventDefault();
        
        var flagURL = $(this).siblings().find('.flag-action').attr('href');
        console.log(flagURL);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="linkbutton">linkbutton div</div>
<h4 class="quoteflag">
    <a href="/demo/url/here" title=" " class="flag-action">
    </a>
</h4>