Div父元素和两个子元素，如何在一个子元素中获取另一个子元素的id？

Question

我想在jquery中获取我的svg的id，我尝试过这个jquery但是它是未定义的。

$(event.target).children('svg').attr("id")

当我查看父级时，Target.event返回p的数据，我有一个mmy列：

<div class="col-md-4">
  <div class="zone" >
          <svg id="graphItem0_2" with="300" height="300"></svg>
          <p class="glyphicon glyphicon-chevron-down" style="position: absolute;  top: 300px; right:20px;" data-toggle="collapse" data-target="#demo2"></p>
    </div>
</div>

我在网页上有许多SVG元素，当我尝试使用$(svg).attr("id")时，只能获取到第一个元素的ID，但是当我点击其他SVG元素时，它们的ID与第一个元素相同，导致其他SVG元素没有正确的ID。

- Stroumphette-ES

---

你的事件处理程序在哪里？ - Satpal

检查 event.target 返回了什么。 - Rajesh

Answer 1

您可以将点击事件附加到父级 div zone 上，然后使用 jQuery 对象 $(this) 查找 svg，而不是直接将点击事件附加到 svg 元素上。

$('.zone').on('click',function(){
  alert( $(this).find('svg').attr("id") );
})

希望这有所帮助。

$('.zone').on('click',function(){
  alert( $(this).find('svg').attr("id") );
})

.zone{
  background-color: red;
}
svg{
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="zone" >
  <svg id="graphItem0_2" with="300" height="300"></svg>
  <p class="glyphicon glyphicon-chevron-down" style="position: absolute;  top: 300px; right:20px;" data-toggle="collapse" data-target="#demo2"></p>
</div>

- Zakaria Acharki

---

是的，但我使用meteor.js，我的点击区域调用一个函数。如果我尝试点击，则会出现未定义的p变量，我该怎么办？ - Stroumphette-ES

Answer 2

尝试做类似于这样的事情。

$(".zone").click(function(){
  var id = $("svg").attr("id");
  alert(id);
});

- Pravin Vavadiya

---

这很简单！谢谢！我是jQuery的初学者，感谢！ - Stroumphette-ES

请注意，这仅适用于页面上只有一个SVG的情况。并且会获取页面上的任何SVG，无论它是否在单击区域内。Zakaria的解决方案更好。 - Paul LeBeau

Answer 3

请问您能试一下这个吗：

var x = document.getElementById("svg").id;

如果页面上只有一个svg元素，它将工作得很好。

- Anand Systematix

---

我使用meteor.js，但出现了一个错误，错误信息为Uncaught TypeError: Cannot read property 'id' of null。 - Stroumphette-ES