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.

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.

• javascript
• jquery
• html

Share Improve this question Follow edited Jun 2, 2015 at 5:48 Matarishvan asked Jun 2, 2015 at 5:44 MatarishvanMatarishvan 2,44233 gold badges4242 silver badges7171 bronze badges 1

• 2 first close <a> tag <a title="<div>some text 1</div>"> </a> – Nishit Maheta Commented Jun 2, 2015 at 5:46

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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/tusharj/zfboe9o1/

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

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