Getting element values ​​inside a div tag

Question

I have several div tags with different identifiers on a page with the following property :.

<div class="alert alert-info" id="1"> <p><b><span class="adName">Name</span></b><br> <span class="ad1">address1</span><br> <span class="ad2">address2</span><br> <span class="ad3">address3</span><br> <span class="adCity">city</span><br> <span class="adState">state</span><br> <span class="adPin">pincode</span><br> Ph no :<span class="adPhone">phone</span><br> </p> </div 

I want to get the values ​​inside the span tags when I click on a specific div. How can I determine the id that is clicked and then get its contents?

Answer 1

You can use find () in the click div event.

 $('.alert.alert-info').click(function(){ var $this = $(this); adName = $this.find('.adName').text(); ad2 = $this.find('.ad2').text(); //So you can repeat for remaining elements. }); 

Answer 2

To get the values ​​inside the span tags when you click on a specific div, do the following:

 $('.alert-info').click(function(){ var $spans = $(this).find('span'); // Loop through all the spans inside this div $spans.each(function(){ alert($(this).text()); }) }); 

EDIT

In case we already know that .alert-info is a DIV, then there is no need to point to a search from div.alert-info. Use .alert-info directly for performance .alert-info only :)

Answer 3

Here is a possible javascript solution

 function getInfo(div) { var spans = div.getElementsByTagName("span"); return Array.prototype.reduce.call(spans, function(acc, span) { acc[span.className] = span.textContent; return acc; }, { id: div.id }); } var divs = document.getElementsByClassName("alert"); Array.prototype.forEach.call(divs, function(div) { div.addEventListener("click", function() { console.log(getInfo(div)); }, false); }); 

 <div class="alert alert-info" id="1"> <p><b><span class="adName">Name</span></b> <br> <span class="ad1">address1</span> <br> <span class="ad2">address2</span> <br> <span class="ad3">address3</span> <br> <span class="adCity">city</span> <br> <span class="adState">state</span> <br> <span class="adPin">pincode</span> <br>Ph no :<span class="adPhone">phone</span> <br> </p> </div> <div class="alert alert-info" id="2"> <p><b><span class="adName">Name</span></b> <br> <span class="ad1">address1</span> <br> <span class="ad2">address2</span> <br> <span class="ad3">address3</span> <br> <span class="adCity">city</span> <br> <span class="adState">state</span> <br> <span class="adPin">pincode</span> <br>Ph no :<span class="adPhone">phone</span> <br> </p> </div> 

Answer 4

You can jump to a child of a DIV using jQuery as follows:

  $('.alert-info').click(function(){ alert($(this));//This will give you the clicked DIV object $(this).find('span'); //This will give you all spans inside it }); 

Answer 5

you can try

 $('div.alert-info').click(function(){ var id =$(this).attr("id"); var name = $('#' +id").children("span").text(); }); 

Answer 6

If you want to get the contents of a range, try under the code

  $('.alert alert-info').click(function() { var name = $(this).find('span.adName').html(); var city = $(this).find('span.adCity').html(); // likewise you can get content of all the span under the div which you have clicked }); 

Answer 7

You can use this.attributes["id"].value to get the id name of the clicked div.