JQuery CSS選擇器奇怪的行爲，爲什麼？

我正在研究一些前端功能。實際上，我正在做Ajax請求並在調用que後修改UI。JQuery CSS選擇器奇怪的行爲，爲什麼？

我確定相關項目/視圖，以我的模型（前）使用，因爲我通過組合類+ ID選擇不同的項目，這將不會是唯一的ID。

簡單的例子：

<div id="23"class="status_ic btn btn-info">Status Name</div> 
<div class="botones_applies" id="23"> 
    <div class="btn btn-xs btn-primary btn-acept" id="23"> 
    Acept 
    </div> 
    <div class="btn btn-xs btn-borrar btn-danger btn-deny" id="23"> 
     Deny 
    </div> 
</div>

我這樣做：

$('.botones_applies#23').empty(); 
status_btn = $('.status_ic#23'); 
status_btn.removeClass('btn-info'); 
status_btn.addClass('btn-primary'); 
status_btn.text('Acepted');

我沒有使用這種選擇沒有任何問題，但在這裏，我遇到了奇怪的行爲，更多的意見我第一個選擇器不工作，而另一個工作，他們使用相同的邏輯。我注意到，如果我將訂單更改爲$('#23.botones_applies')，則按預期工作。我可以做到這一點，因爲不會破壞任何東西，但我擔心爲什麼會發生這種情況。

$('.botones_applies#23') ---> doesn't work 
$('#23.botones_applies') ---> works 
$('.status_ic#23') ---> works

有沒有我缺少的一些CSS或jQuery規則？也許一些愚蠢的小東西...也許我忘了一些重要的概念..有人會解釋我這個？謝謝！

來源

2017-10-19 aaron0207

'id'值**必須在文檔中是唯一的，所以這是您應該解決的問題，之後這個問題可能會消失。 –

也'ID'值必須以字母開頭，而不是數字... –

@MartinAdámek：不，這是不正確的; HTML只關心它們不包含空格。但是如果用CSS開頭的話，使用CSS來選擇它們會更困難，因爲在CSS ID選擇器中''不能（正式）使用數字作爲第一個字符。 –

有我錯過了一些CSS或jQuery的規則？

的HTML規則是：id值必須在文件中是唯一的。

另外：雖然id值以數字開頭，但CSS ID選擇器不能，所以#23是無效的選擇器。你需要一個轉義符（#\32 3，在字符串文字中需要爲"#\\32 3"）或屬性選擇器（[id="23"]）。

來源

2017-10-19 08:42:49

'$（'[id =「23」] [class =「botones_applies」]'）'和'$（'[id =「23」] [class =「botones_applies」]'）'正在工作。爲什麼罕見的行爲不會出現？我所有的身份證號碼均爲數字，並且按預期工作。 – aaron0207

@ aaron0207：再說一次：'＃23'是一個無效的CSS選擇器，所以奇怪的行爲並不是它有時會失敗，而是它有時會起作用。（原因是jQuery試圖檢測並優化ID選擇器並將它們轉換爲'getElementById'調用。）但是，您不希望爲'class'使用屬性選擇器。相反：'$（'。botones_applies [id =「23」]'）但是，再次：修復ID，它**會再次咬你。你像使用類一樣使用它們。改用類。 –

謝謝，現在我能理解它。我知道我做得很糟糕，但是我一直在努力，因爲我一直在努力，直到我遇到這種情況 – aaron0207

你不具有唯一的ID，這是你最初的問題。

難道我也建議採用JS特定的類，而不是使用IDS。我喜歡用js作爲前綴，以便將它們與用於樣式的類分開設置。這樣做的好處是你可以重複類但不是ID。

來源

2017-10-19 08:46:27

JQuery CSS選擇器奇怪的行爲，爲什麼？

回答

相關問題