How to get text() by attr() in jquery

Question

Here's the questions

<div class="question">
            <div class="button" data-q="1" data-a="1"><a href="javascript:void();">2002</a></div>
            <div class="button" data-q="1" data-a="2" data-g="true"><a href="javascript:void();">2010</a></div>
            <div class="button" data-q="1" data-a="3"><a href="javascript:void();">1985</a></div>
            <div class="button" data-q="1" data-a="4"><a href="javascript:void();">2013</a></div>
        </div>

I would like to have the text() value for the attr() that have data-g set.

Right now the code I tried don't work

$('.question .button a').click(function(){    
  var aText = $(this).parents('.question').find('data-g').text();
  return aText;
});

I've tried this one but I get all text inside the .question DIV (2002,2010,1985,2013)

$('.question .button a').click(function(){    
  var aText = $(this).parents('.question').text();
  return aText;
});

So how can I have only the result of the DIV with data-g attribute and get only the 2010 as text.

Thanks

possible duplicate of [jQuery how to find an element based on a data-attribute value?](http://stackoverflow.com/questions/4191386/jquery-how-to-find-an-element-based-on-a-data-attribute-value) and [How to find an element with a specific attribute that has a specific value](http://stackoverflow.com/questions/9307448/how-to-find-an-element-with-a-specific-attribute-that-has-a-specific-value) and [many others](http://stackoverflow.com/search?q=jquery+find+element+with+certain+attribute). — Felix Kling, Jun 04 '12 at 14:20

score 5 · Accepted Answer · answered Jun 04 '12 at 14:17

5

$('.question .button a').click(function() {
    var aText = $(this).closest(".question").find("[data-g]").text();
                      // to check for `true` use ("[data-g='true']")
    console.log(aText);
});

DEMO: http://jsfiddle.net/2ny7j/

answered Jun 04 '12 at 14:17

VisioN

143,310
32
282
281

I've tried and didn't worked but this one did work: var aText = $(this).parents('.question').find("[data-g='true']").text(); - I have to go back to the parents first to find the closest. Well I think – Warface Jun 04 '12 at 14:21
@Warface You'd better use `closest` instead of `parents`. So you go to the first parent that has class `".question"` and then inside this element you search for elements with attribute `"[data-g]"`. – VisioN Jun 04 '12 at 14:26

Prasenjit Kumar Nag · Answer 2 · 2012-06-04T14:37:06.800

Use it like

$('.question .button a').click(function(e){
  e.preventDefault();    
  var aText = $(this).closest('.question').find("div[data-g]").text();
  alert(aText);
  return aText;
});

NOTE

Returning aText from that function will return that value to nowhere in your code, as that is a callback function, more ever returning values from click callback have different meaning in jQuery, which may result in unexpected behavior. If you need to pass that value to somewhere else you have to call another function with this value like

someFunction(aText);

Working Fiddle

Check jQuery has attribute selector

How to get text() by attr() in jquery

2 Answers2