ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryで子要素の属性値を変更する方法
jqueryで子要素の属性値を変更する方法
- 青灯夜游オリジナル
- 2023-01-17 16:13:262271ブラウズ
変更方法: 1. セレクターを使用して、指定された要素オブジェクトを取得します。構文 "$(selector)" は、指定された要素を含む jquery オブジェクトを返します。 2. Children() を使用して、以下の子を取得します。指定された要素 object.要素、構文は "element object.children(filter)"; 3. attr() を使用して子要素の属性値を変更します、構文は "child element.attr("属性名", "新しい値")" または "子要素.attr" ({属性 1: "新しい値"、属性 2: "新しい値"...})"。
このチュートリアルの動作環境: Windows7 システム、jquery3.6 バージョン、Dell G3 コンピューター。
jquery では、children() 関数と attr() 関数を使用して、子要素の属性値を変更できます。
実装手順:
ステップ 1: jquery セレクターを使用して、指定された要素オブジェクトを取得します
$(selector)
指定された要素を含む jquery オブジェクトを返します
ステップ 2: Children() 関数を使用して、指定された要素の下にある直接の子要素を取得します要素オブジェクト
元素对象.children(filter)
| ##説明 | |
|---|---|
| # オプション。子要素の検索を絞り込むセレクター式を指定します。 |
ステップ 3: 使用しますattr()関数は子要素の属性値を変更します
//单个属性
子元素对象.attr("属性名","新属性值");
//多个个属性
子元素对象.attr({属性1:"新值",属性2:"新值"....});
実装例：
ul#の子要素を変更します# #li
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.6.0.min.js"></script>
<style>
div * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
li{
color:red;
border:2px solid red;
}
.li{
color:green;
border:2px solid green;
}
</style>
<script>
$(document).ready(function() {
$("button").on("click", function() {
$("ul").children("li").attr("class","li");
});
});
</script>
</head>
<body class="ancestors">
<div style="width:500px;">div (父节点)
<ul>ul (指定元素)
<li>li (子节点1)
<span>span (孙节点1)</span>
</li>
<li>li (子节点2)
<span>span (孙节点2)</span>
</li>
<li>li (子节点3)
<span>span (孙节点3)</span>
</li>
</ul>
</div>
<button>修改ul的子元素li的class属性值</button>
</body>
</html>jQuery ビデオ チュートリアル ,
ウェブ フロントエンド ビデオ
]
以上がjqueryで子要素の属性値を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。