CODEWITHSUNDEEP
jquery
user1452893
user1452893

Reputation: 868

Troubles getting this value using JQuery

Troubles getting this value: .data("blog-title") on hover of .avatar in this kind of code:

<a target="_blank" href="http://somwhere.com/"  class="frame">
<img alt="" class="avatar" src="http://something.com/pong.png/>
        </a>
        <script type="text/javascript">
            some script stuff
        </script>

            <div class="note">
                        <a target="_blank" class="preview" href="http://something.com/blogpost/bar"><img src="http://http://something.com/some.gif" /></a>
                <a href="#" data-blog-title="fooname" class="block">foobar</a>
            </div>

Have tried various parent, finds, and etcetera. Just can't solve it.

Upvotes: 1

Views: 68

Answers (5)

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$(function() {
   $(".avatar").mouseenter(function() {
     var blogTitle = $(this).closest('.frame').find('.block').data('blogTitle');
     console.log(blogTitle );  
   });
});

Upvotes: 1

PSL
PSL

Reputation: 123739

try this:-

Assuming you have multiple sections like this, you can try this way

$('.avatar').hover(function(){
var value = $(this)
          .closest('.frame') // Get to the parent .frame
          .siblings('.note') // look for its sibling .note
          .find('.block') //find the anchor with class.block
          .data('blog-title'); //get the value. If this attribute value is being changed dynamically after the load then you need to use .attr('data-blog-title')

});

otherwise just do

 $('.block').data('blog-title');

http://jsfiddle.net/kNntX/

Remember to close the quotes here

<img alt="" class="avatar" src="http://something.com/pong.png/">
                                                              ^----------

Upvotes: 2

JanR
JanR

Reputation: 6132

First of all I would advise you to keep all the <script> tags in one location in your HTML file this improves readability and makes it easier to see what gets triggered and the order it happens in.

That being said, you probably want to do your code something like this:

Keep in mind that in your current HTML code the element that you are after is called .block

 <script>
       //wait for the document to be ready before triggering
       $(document).ready(function(){
           $('.avatar').hover(function(){
               var title =  $(this).next('.note').children('.block').attr("data-blog-title");
               //do something with title now that you've loaded it.
              },
           //callback
           function(){ 
             //something else on mouseout
           });
});
</script>

Please be aware I haven't tested this but with a little bit of debugging this should work.

Upvotes: 1

Bartek
Bartek

Reputation: 15609

This should work? (jsfiddle)

$(function() {
   $(".avatar").mouseover(function() {
     console.log($(".block").data('blog-title'));  
   });
});

Upvotes: 1

sgeddes
sgeddes

Reputation: 62841

Something like this should work using data:

$(".avatar").hover(function(e){
    alert($('.block').data('blog-title'));
}, function() {

});

http://api.jquery.com/data/#data-html5

Upvotes: 1

Related Questions