jQuery選擇只選擇第一個鏈接

我有一個表是這樣的：jQuery選擇只選擇第一個鏈接

<table> 
    <% foreach (var item in Model.Data) { %> 
    <tr> 
     <td><a href="#"><div id="stopId"><%: item.StopID %></div></a></td> 
     ... 
     ... 
    </tr> 
</table>

而且我使用這個jQuery選擇用戶單擊停止編號。

$(function() { 
    $("#stopId").live('click', function() { 
    var stopId = $("#stopId").html() 
     ... 
     ... 
    }); 
});

但我的變量stopId總是最終被在表中的第一stopId，而不是實際被點擊的一個。那麼我哪裏錯了？

來源

2011-04-05 Gary the Llama

通常你不會允許使用相同ID爲一個以上的元素，嘗試使用上使用id類 – Teneff 2011-04-05 03:53:44

良好的漁獲而不是班級人員。我原本選擇這個類，但將它改爲id，後來我想讓ASP.NET MVC生成唯一的id。 – 2011-04-05 04:04:24

你可能想改變

$(function() { 
    $(".stopId").live('click', function() { 
    var stopId = $(this); 
     ... 
     ... 
    }); 
});

和HTML成爲

來源

2011-04-05 03:56:55 ysrb

「var stopId = $（this）.html（）;」給了我我想要的價值。感謝大家的幫助。 – 2011-04-05 04:05:29

我也建議閱讀一下class和id之間的區別，因爲如果你使用DOM或CSS做任何事情，這是一個重要的基本概念。 – 2011-04-05 04:12:06

如果該循環在每次迭代中生成一個新的TR，那麼最終會有多個具有相同ID的對象，這是無效的標記。一個ID只能在文檔中使用一次，因此jQuery只是在尋找一個。一旦找到第一個，就完成了。

來源

2011-04-05 03:52:57

它每次迭代都會生成一個新的TR。讓它在ASP.NET MVC中生成一個新的id然後在jQuery中選擇這個唯一的id的正確方法是什麼？ – 2011-04-05 03:56:36

您可以使用$(this)來引用選擇器。如果在同一頁面上顯示多次，您也應該使用班級而不是ID。

$(function() { 
     $("#stopId").live('click', function() { 
     var stopId = $(this).html() 
      ... 
      ... 
     }); 
    });

http://jsfiddle.net/Vrmhv/

來源

2011-04-05 03:56:41 jon3laze

這裏的關鍵是 'ID' 和 '類' 之間的區別屬性 - 一個常見的混淆來源和值得理解的東西。

簡而言之，'id'屬性是唯一的頁面中某個元素的標識符，所以應該只有頁面上的每個id具有一個元素。在內部，jQuery使用document.getElementById()來定位元素，它將只返回一個元素。

對於像您的stopId這樣的非唯一（即重複）標識符，您應該使用'class'屬性。對於您的代碼，只需將'id='更改爲'class='，並將"#stopId"更改爲".stopId"即可。 jQuery將使用document.getElementsByClassName()來檢索所有具有class="stopId"屬性的元素。還要注意的是，你可以有多個類（如class="stopId greenText"）

看到這個問題：div class vs id

來源

2011-04-05 04:09:30

我明確瞭解它們之間的區別（但感謝您的複習），但認爲我可能需要讓我的ASP.NET MVC爲每個tr生成不同的ID。使用課程變得更容易。謝謝！ – 2011-04-05 04:21:12

如果使用ids，你肯定需要讓它爲每個人生成唯一的id，因爲帶有重複id的html文檔無效。在這種情況下，由於您有'this'來區分哪些是被點擊的，因此class絕對看起來就是要走的路。嘗試把這個進入W3C的驗證：'<！DOCTYPE HTML> 雙標識

' – 2011-04-05 04:55:34

jQuery選擇只選擇第一個鏈接

回答

相關問題