javascript - jquery siblings attribute - Stack Overflow

admin管理员组

文章数量:1313735

I am trying to store the href value in the .mp3Logo div to a variable. I want to store it by clicking on a .startb. The value in musicLink is being stored as undefined. Why?

Javascript

$('.startb').click(function() {
  var musicLink = $(this).siblings('.mp3Logo').attr('href');
});

HTML

<div class="audioContainer">
  <div class="audioTitle"></div>
  <div class="playerHolder">
    <div class="startb" id="startb26" rel="Audio/004_IAM_God_is_Love.mp3"><img src="dbs/images/start.png" width="40" height="40" /></div>
    <div class="flashObj" id="test26"></div>
    <div class="mp3Logo"><a href="Audio/004_IAM_God_is_Love.mp3"><img src="dbs/images/mp3_off.gif"/></a></div>
  </div>
</div>

I am trying to store the href value in the .mp3Logo div to a variable. I want to store it by clicking on a .startb. The value in musicLink is being stored as undefined. Why?

Javascript

$('.startb').click(function() {
  var musicLink = $(this).siblings('.mp3Logo').attr('href');
});

HTML

<div class="audioContainer">
  <div class="audioTitle"></div>
  <div class="playerHolder">
    <div class="startb" id="startb26" rel="Audio/004_IAM_God_is_Love.mp3"><img src="dbs/images/start.png" width="40" height="40" /></div>
    <div class="flashObj" id="test26"></div>
    <div class="mp3Logo"><a href="Audio/004_IAM_God_is_Love.mp3"><img src="dbs/images/mp3_off.gif"/></a></div>
  </div>
</div>

• javascript
• jquery
• html

Share Improve this question Follow edited May 15, 2018 at 14:47 Vadim Ovchinnikov 14k77 gold badges6565 silver badges9494 bronze badges asked Feb 13, 2012 at 23:38 BlainerBlainer 2,7121010 gold badges3838 silver badges4040 bronze badges 1

• 1 The rel attribute holds your a[href] value. – Damien Keitel Commented Feb 13, 2012 at 23:47

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

The div does not have an href attribute. You need to descend into the anchor.

$(this).siblings('.mp3Logo').find('a').attr('href');

$('.startb').click(function() {
    var musicLink = $(this).siblings('.mp3Logo').children().attr('href');
});

or even easier as I mented that the div.startb rel attribute holds the a[href] value.

 $('.startb').click(function() {
        var musicLink = $(this).attr('rel');
    });

Div is not a href so your were receiving an undefined href.

jqueryjavascript

remove the var

$('.startb').click(function() {
    musicLink = $(this).siblings('.mp3Logo').find('a').attr('href');
}); 

you are making it local in scope

and you need to look into the div to find the a which actually has the href

A bination of the solutions proposed above is called for. Yes, musicLink is undefined because your use of "var" makes it local in scope. Either write "var musicLink;" in the desired scope before your .click() or remove the "var" to make your variable global. See What is the purpose of the var keyword and when to use it (or omit it)? for a good explanation of the scope chain in JavaScript.

You're also looking for href in the wrong place. This should work:

$('.startb').click(function() {
    musicLink = $(this).siblings('.mp3Logo').children('a').attr('href');
});

本文标签： javascriptjquery siblings attributeStack Overflow