get this anchor title text jQuery

Question

I'm trying to get all anchor title text inside children div's

My HTML

<div onClick="openList();">
  <div class="inc">
    <div class="iWrap">
        <a title="<div>blah1 blah1</div>"></a>
        <a title="<div>blah2 blah2</div>"></a>
        <a title="<div>blah3 blah3</div>"></a>
        <a title="<div>blah4 blah4</div>"></a>
    </div>
  </div>
</div>

<div onClick="openList();">
  <div class="inc">
    <div class="iWrap">
        <a title="<div>some text 1</div>"></a>
        <a title="<div>some text 2</div>"></a>
        <a title="<div>some text 3</div>"></a>
        <a title="<div>some text 4</div>"></a>
    </div>
  </div>
</div>

My jQuery code

function openList()
{
    var getTitletxt = $(this).find('a').attr("title");
    console.log(getTitletxt);
}

I'm getting undefined in my console.log. Basically i'm trying to fetch text inside title div.

2

first close tag ` ` – Nishit Maheta Jun 02 '15 at 05:46

score 2 · Answer 1 · edited May 23 '17 at 12:14

2

Pass current object using this, by default this is not available of you bind handler use javascript inline handler. Your title is also not valid, you problably need on text that is not enclosed in div.

Live Demo

<div onClick="openList(this);">

function openList(obj)
{
    var getTitletxt = $(obj).find('a').attr("title");
    console.log(getTitletxt );
}

Change

<a title="<div>some text 1</div>"</a>

To

<a title="some text 1"> anchor 1 </a>

For custom tooltip class you can make css class, I took it from answer here.

Live demo with tool tip custom style

a.ac[title]:hover:after 
{
}

edited May 23 '17 at 12:14

Community

1
1

answered Jun 02 '15 at 05:46

Adil

146,340
25
209
204

Thanks this works. . but i need custom css for my title.. so the div tag inside a title.. which works very fine. – Matarishvan Jun 02 '15 at 05:55

score 2 · Accepted Answer · answered Jun 02 '15 at 05:59

Don't use inline event handlers. You can use on for binding events.

HTML:

<div class="myClass">
<!--       ^^^^^^^^^ -->
    <div class="inc">
        <div class="iWrap"> <a title="<div>blah1 blah1</div>">a</a>
            <a title="<div>blah2 blah2</div>">b</a>
            <a title="<div>blah3 blah3</div>">c</a>
            <a title="<div>blah4 blah4</div>">d</a>
        </div>
    </div>
</div>

<div class="myClass">
<!--     ^^^^^^^^^ -->
    <div class="inc">
        <div class="iWrap"> <a title="<div>some text 1</div>">aa</a>
            <a title="<div>some text 2</div>">bb</a>
            <a title="<div>some text 3</div>">cc</a>
            <a title="<div>some text 4</div>">dd</a>
        </div>
    </div>
</div>

Javascript:

$('.myClass').on('click', 'a', function() {
    alert($(this).attr('title'));
});

Demo: http://jsfiddle.net/tusharj/zfboe9o1/

score 1 · Answer 3 · answered Jun 02 '15 at 05:48

First close your Tag.

<a title="<div>some text 1</div>"> </a>

Pass this as parameter in function

  <div onClick="openList(this);">

   function openList($this)   
   {
     $($this).find('a').each(function(){  // To get all <a> tag title
        var getTitletxt = $(this).attr("title");
        console.log(getTitletxt );
     }); 
  }

get this anchor title text jQuery

3 Answers3