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

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

3 Answers 3

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