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 がクリックされたときに、span タグ内の値を取得したいと考えています。クリックされた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

特定の 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());
    })
});

編集

それがDIV.alert-infoであることがすでにわかっている場合は、 div.alert-info から検索するように指定する必要はありません。パフォーマンスを向上させるためだけに直接使用します:).alert-info

于 2013-05-06T10:40:05.403 に答える
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>

于 2013-05-06T11:08:11.283 に答える
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 に答える