基於點擊的兩個重複類名稱的元素ID

我有兩個不同id的div，但具有相同的類名。例如：窗口1 &窗口2 ...基於點擊的兩個重複類名稱的元素ID

<div id="Window1" class="name"> 
    <span id="Admin"></span> 
</div> 

<div id="Window2" class="name"> 
    <span id="Admin"></span> 
</div>

我想獲得「名」當我點擊ID「管理員」的元素ID。顯然，VAR解決方案是錯誤的，但下面要設置一些接近這個...

var Window_id = $(".name").attr("id");

我希望這說明了什麼，我試圖做的。提前致謝。

來源

2012-02-25 Joe

ID必須是唯一的。你應該使用有效的HTML。 – 2012-02-25 23:34:30

首先，您不能擁有兩個具有相同ID的對象。所以你不能有兩個對象id="Admin"。你將不得不給每個人一個不同的ID或使用一個共同的類名（或兩者）。所以，你可以把它改成這樣：

<div id="Window1" class="name"> 
    <span id="Admin1" class="admin"></span> 
</div> 

<div id="Window2" class="name"> 
    <span id="Admin2" class="admin"></span> 
</div>

而且，然後使用這個jQuery來處理點擊獲取點擊的對象的父的ID：多一點有效

$(".admin").click(function() { 
    var parentId = $(this).parent().attr("id"); 
});

，或者用少一點的jQuery：

$(".admin").click(function() { 
    var parentId = this.parentNode.id 
});

我最喜歡的選擇實際上是這個，因爲它是對某些HTML變化多了幾分穩健的（如果一個新的div容器是圍繞引進像跨度）：

$(".admin").click(function() { 
    var parentId = $(this).closest(".name").attr("id"); 
});

.parent()或.parentNode前兩個選項一起使用上去的DOM hieararchy只有一個級別。

.closest(".name")在第三個選項中使用，根據需要調高父級層次結構，直到找到與傳入選擇器匹配的父級。它有點更強大，並且更有可能確保您獲得所需的父代，即使HTML稍作更改。並不總是需要，但值得了解。

來源

2012-02-25 23:36:20 jfriend00

真棒謝謝:) – Joe 2012-02-25 23:47:23

的click處理程序中使用此。

$(this).parent().attr("id");

$(this).parent()將獲得這與name類的DIV父元素和attr('id')將得到的div元素的ID。

邊注：理想情況下，頁面上的元素ID應該是唯一的，你的標記沒有。

我會建議，而不是有一個id管理span，有一個共同的類，並使用類選擇器來選擇它們。像這樣的東西。

HTML

<div id="Window1" class="name"> 
    <span class="admin"></span> 
</div> 

<div id="Window2" class="name"> 
    <span class="admin"></span> 
</div>

$('.admin').click(function(){ 
    var parentId = $(this).parent().attr("id"); 

    //Or 
    var parentId = $(this).parent()[0].id; 

    //Or 
    var parentId = $(this).closest('.name').attr('id'); 

    //Or 
    var parentId = $(this).closest('.name')[0].id; 
});

來源

2012-02-25 23:34:06 ShankarSangoli

謝謝ShankarSangoli！ – Joe 2012-02-25 23:48:55

你不能給同一個ID爲2元。你正在給同樣的身份證號碼。

如果你有一個跨度和相同的類名不同的充標識，要獲得父ID，你可以做到這一點

var parentID=$(".spanClassName").parent().attr("id");

假設spanClassName，客戶可使用這兩個類名跨越

$(".spanClassName").click(function(){  
    var parentID= $(this).parent().attr("id"); 
});

來源

2012-02-25 23:35:05 Shyju

你不能有兩個跨越同一個id「Admin」的跨度。試試這個

<div id="Window1" class="name"> 
    <span>Admin</span> 
</div> 

<div id="Window2" class="name"> 
    <span>Admin</span> 
</div> 

$('.name span').click(function(e){ 
    console.log($(this).parent('.name').attr('id')); 
});

來源

2012-02-25 23:37:21 scibuff

這是一個有趣的方式。謝謝 – Joe 2012-02-25 23:48:15

<div id="Window1" class="name"> 
    <span class="Admin">a</span> 
</div> 

<div id="Window2" class="name"> 
    <span class="Admin">a</span> 
</div> 
<script> 
$('.Admin').on('click', function(){ 
    var id = $(this).parent().attr('id'); 
    alert(id); 
}); 
</script>

您需要使用類「聯繫」，因爲你比元素更加ID爲「管理員」其他明智的。

來源

2012-02-25 23:39:07

謝謝弗雷德裏克！ – Joe 2012-02-25 23:48:32

基於點擊的兩個重複類名稱的元素ID

回答

相關問題