jquery : Onclick of a div - get id of following div

Question

While clicking on a div (any 'resultsMainContainer' div) i should get the div id with class 'result' inside that particular div.

<div class="resultsMainContainer">
 <div id="48" class="sbsCard panel  result">
   abcd
 </div>
</div>

<div class="resultsMainContainer">
 <div id="49" class="someCard result">
  aabb
 </div>
</div>

<div class="resultsMainContainer">
 <div id="50" class="sbsCard panel3 result">
   nnaaa
 </div>
</div>

<div class="resultsMainContainer">
 <div id="33" class="sbsCard panel  result">
   abcddd
 </div>
</div>

I tried this:

$('body').on('click', '.resultsMainContainer', function() {
         alert($(this).next(".result").attr("id"));
});

But it's does not seems working. Is there any other idea/options ?
Or did i made any mistake :) ?

Answer 1

Use .children() or .find() instead of .next()

$('body').on('click', '.resultsMainContainer', function() {
     alert($(this).children(".result").attr("id"));
});

and

use .prop() instead of .attr()

alert($(this).children(".result").prop("id"));

Read .prop() vs .attr()

Answer 2

use jQuery.find(), change to:

alert($(this).find(".result").attr("id"));

Answer 3

Use find instead of next, as .result is inside "resultsMainContainer" not next to it.

$('body').on('click', '.resultsMainContainer', function() {
  alert($(this).find(".result").attr("id"));
});