關於jQuery的 .parent() 方法根據子元素的判斷條件來對父元素的屬性進行操作


當前遇到問題:對於一個PagingGridView表格控件,通過判斷某一行的值是否滿足條件,將整一行的背景色改為紅色來進行提醒。

所以問題就是,如何通過子元素來修改父元素的css屬性。

返回 <span> 的直接父元素:

$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
結果:

body (great-great-grandparent)
    div (great-grandparent)
        ul (grandparent)
        li (direct parent) span        

菜鳥教程的-定義和用法

parent() 方法返回被選元素的直接父元素。

DOM 樹:該方法只沿着 DOM 樹向上遍歷單一層級。如需向上遍歷直至文檔根元素的所有路徑(返回祖父節點或其他祖先),請使用 parents() 或 parentsUntil() 方法。

提示:如需沿着 DOM 樹向下遍歷單一層級,或向下遍歷直至最后一個后代的所有路徑(返回子節點或其他后代),請使用 children()或 find() 方法。

$(selector).parent(filter)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
.ancestors *{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>

<body class="ancestors">body (曾曾祖父節點)
    <div style="width:500px;">div (曾祖父節點)
        <ul>ul (祖父節點)  
            <li>li (直接父節點)
                <span>span</span>
            </li>
        </ul>   
    </div>
</body>

</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM