获取 div 标签内元素的值

Question

我在页面上有多个具有不同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

当点击特定的 div 时，我希望能获取 span 标签内的值。如何识别被点击的 div 并获取其内容？

- Manoj Sreekumar

---

你是否应该假设当被点击时，你想要识别的 div 具有 "alert" 类？ - Xotic750

Answer 1

您可以在 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.
});

- Adil

Answer 2

当单击特定的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());
    })
});

编辑

如果我们已经知道.alert-info是一个DIV，那么就没有必要指定从

中搜索。只需直接使用.alert-info即可提高性能 :)

- palaѕн

Answer 3

这里提供了一个可能的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>

- Xotic750

Answer 4

您可以使用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
    });

- Milson

Answer 5

你可以尝试一下

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

});

- Suresh Atta

Answer 6

如果你想获取 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
 });

- Sudz

Answer 7

您可以使用 this.attributes["id"].value 来获取被点击的 div 的 id 名称。

- brent