4

我在具有以下属性的页面上有多个具有不同 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 时，我想获取跨度标签内的值。如何识别被点击的 div 然后获取其内容？

4

7 回答 7

6

您可以在 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.
});
于 2013-05-06T10:39:57.557 回答
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>

于 2013-05-06T11:08:11.283 回答
3

要在单击特定 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，则无需指定从 div.alert-info 中搜索，直接使用.alert-info仅用于提高性能 :)

于 2013-05-06T10:40:05.403 回答
2

您可以像这样使用 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
    });
于 2013-05-06T10:52:51.020 回答
0

你可以试试

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

});
于 2013-05-06T10:43:21.920 回答
0

如果你想获取 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
 });
于 2013-05-06T10:45:15.223 回答
0

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

于 2013-05-06T10:47:20.787 回答