javascript 获取div标签内元素的值

Getting values of elements inside a div tag

提问by Manoj Sreekumar

I have multiple div tags with different ids on a page with the following property:.

我在具有以下属性的页面上有多个具有不同 ID 的 div 标签：

<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?

我想在单击特定 div 时获取 span 标签内的值。如何识别点击的 div 然后获取其内容？

回答by Adil

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

您可以在 div 的点击事件中使用find()方法。

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

回答by Xotic750

Here is a possible javascript solution

这是一个可能的javascript解决方案

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>

回答by pala?н

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

要在单击特定 div 时获取 span 标签内的值，请执行以下操作：

$('.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-infois a DIV, then there's no need to specify to search from div.alert-info Directly use .alert-infoonly to boost performance :)

如果我们已经知道那.alert-info是一个DIV，那么就没有必要指定从 div.alert-info 搜索 直接使用.alert-info只用于提高性能:)

回答by Milson

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

您可以像这样使用 jQuery 遍历到 DIV 的子元素：

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

回答by Suresh Atta

you can try

你可以试试

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

});

回答by Sudz

If you want to get the content of span Try below code

如果你想获取span的内容试试下面的代码

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

回答by brent

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

您可以使用this.attributes["id"].value来获取单击的 div 的 id-name。