I have multiple div tags with different ids 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 a particular div is clicked. How can I idntify the div which is clicked and then get its contents?

I have multiple div tags with different ids 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 a particular div is clicked. How can I idntify the div which is clicked and then get its contents?

• javascript
• jquery
• html

• Should one assume that the divs that you wish to identify when clicked have a class of "alert" – Xotic750 Commented May 6, 2013 at 10:53

7 Answers 7

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

$('.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.
});

To get the values inside the span tags when a particular div is clicked, do this:

$('.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's no need to specify to search from div.alert-info Directly use .alert-info only to boost performance :)

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>

You can traverse to the child element of DIV using jQuery like this:

    $('.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
    });

you can try

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

});

If you want to get the content of span Try below 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
 });

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