jQuery :lang()

admin發表於2017-02-13
jQuery

此選擇器匹配有一個語言值等於所提供的語言程式碼，或以提供的語言程式碼開始，後面馬上跟一個“ - ”的元素。

例如，選擇器$("div:lang(en)")將匹配<div> and <div>（和它們的後代<div>）

選擇jQuery1.9版本新增。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
jQuery( ":lang(language)" )

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<style>
body { 
  background-color: #ccc; 
}
h3 { 
  margin: .25em 0; 
}
div { 
  line-height: 1.5em
}
.usa { 
  background-color: #f00; 
  color: #fff; 
}
.usa .usa { 
  background-color: #fff; 
  color: #000; 
}
.usa .usa .usa { 
  background-color: #00f; 
  color: #fff; 
}
.spain { 
  background-color: #f00; 
  color: #ff0; 
}
.spain .spain { 
  background-color: #ff0; 
  color: #f00; 
  line-height: 3em; 
}
.spain .spain .spain { 
  background-color: #f00; 
  color: #ff0; 
  line-height: 1.5em; 
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
  $("div:lang(en-us)").addClass("usa");
  $("div:lang(es-es)").addClass("spain");
})
</script>
</head>
<body>
<h3>USA</h3>
<div lang="en-us">red
  <div>white
    <div>and blue</div>
  </div>
</div>
<h3>España</h3>
<div lang="es-es">rojo
  <div>amarillo
    <div>y rojo</div>
  </div>
</div>
</body>
</html>

特別說明:此選擇器不但可以匹配語言值等於所提供的語言程式碼，或以提供的語言程式碼開始，後面馬上跟一個“ - ”的元素，而且還可以匹配它們的後代元素。

相關文章