08 October 2016

jQuery Traversing

By  at  1:49:00 PM     No comments

jQuery Ancestors
jQuery 2016
jQuery parent()

//Chỉ hiển thị CSS thẻ <li> bao bọc thẻ <span>

<style>
.ancestors * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("span").parent().css({"color": "red", "border": "2px solid red"});
});
</script>

<div class="ancestors">
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>
  </div>

  <div style="width:500px;">div (grandparent)
    <p>p (direct parent)
        <span>span</span>
      </p>
  </div>
</div>
Run demo

jQuery parents()


//Hiển thị tất cả CSS của các thẻ bao bọc thẻ <span>

<script>
$(document).ready(function(){
    $("span").parents().css({"color": "red", "border": "2px solid red"});
});
</script>
Run demo
//Hiển thị CSS của thẻ <ul> bao bọc bên ngoài thẻ <span>

<script>
$(document).ready(function(){
    $("span").parents("ul").css({"color": "red", "border": "2px solid red"});
});
</script>
Run demo

jQuery parentsUntil()


//Hiển thị tất cả CSS của các thẻ trong thẻ div bao bên ngoài thẻ <span>

<script>
$(document).ready(function(){
    $("span").parentsUntil("div").css({"color": "red", "border": "2px solid red"});
});
</script>
Run demo
jQuery Descendants
jQuery 2016

jQuery children() 


<style>
.descendants * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
//Hiển thị CSS của tất cả các thẻ con đầu tiên của div

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("div").children().css({"color": "red", "border": "2px solid red"});
});
</script>

<div class="descendants" style="width:500px;">div (current element)
  <p>p (child)
    <span>span (grandchild)</span>
  </p>
  <p>p (child)
    <span>span (grandchild)</span>
  </p>
</div>
Run demo
//Hiển thị CSS của thẻ con thứ nhất trong nhiều thẻ con đầu tiên của div

<script>
$(document).ready(function(){
    $("div").children("p.first").css({"color": "red", "border": "2px solid red"});
});
</script>
Run demo
//Hiển thị CSS của thẻ <span> được tìm thấy trong div bằng find("span")

<style>
.descendants * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("div").find("span").css({"color": "red", "border": "2px solid red"});
});
</script>

<div class="descendants" style="width:500px;">div (current element)
  <p>p (child)
    <span>span (grandchild)</span>
  </p>
  <p>p (child)
    <span>span (grandchild)</span>
  </p>
</div>
Run demo
//Hiển thị CSS trên tất cả các thẻ trong div bằng find("*")

<script>
$(document).ready(function(){
    $("div").find("*").css({"color": "red", "border": "2px solid red"});
});
</script>
Run demo
jQuery Siblings
jQuery 2016
//Hiển thị CSS trên tất cả các thẻ trong class .sibling trừ thẻ <h2>

<style>
.siblings * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("h2").siblings().css({"color": "red", "border": "2px solid red"});
});
</script>

<body class="siblings">

<div>div (parent)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>
Run demo
//Hiển thị CSS tất cả các thẻ <p> nằm trong class .sibling

<script>
$(document).ready(function(){
    $("h2").siblings("p").css({"color": "red", "border": "2px solid red"});
});
</script>
Run demo

jQuery next() 


//Hiển thị CSS của 1 thẻ kế tiếp thẻ <h2>

<style>
.siblings * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("h2").next().css({"color": "red", "border": "2px solid red"});
});
</script>

<body class="siblings">

<div>div (parent)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

Run demo

jQuery nextAll()


//Hiển thị CSS của nhiều thẻ kế tiếp thẻ <h2>

<script>
$(document).ready(function(){
    $("h2").nextAll().css({"color": "red", "border": "2px solid red"});
});
</script>
Run demo
//Hiển thị CSS các thẻ kế tiếp thẻ <h2> đến thẻ <h6> dừng lại

<style>
.siblings * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("h2").nextUntil("h6").css({"color": "red", "border": "2px solid red"});
});
</script>

<body class="siblings">

<div>div (parent)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
  <h5>h5</h5>
  <h6>h6</h6>
  <p>p</p>
</div>
Run demo
jQuery Filtering
jQuery 2016

jQuery first()

//Hiển thị CSS của thẻ (div và <p>) đầu đầu tiên

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("div p").first().css("background-color", "yellow");
});
</script>

<div style="border: 1px solid black;">
  <p>This is the first paragraph in a div.</p>
  <p>This is the last paragraph in a div.</p>
</div><br>

<div style="border: 1px solid black;">
  <p>This is the first paragraph in another div.</p>
  <p>This is the last paragraph in another div.</p>
</div>

<p>This is the last paragraph in body.</p>

//Hiển thị CSS của (div và <p>) cuối cùng

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("div p").last().css("background-color", "yellow");
});
</script>

<div style="border: 1px solid black;">
  <p>This is the first paragraph in a div.</p>
  <p>This is the last paragraph in a div.</p>
</div><br>

<div style="border: 1px solid black;">
  <p>This is the first paragraph in another div.</p>
  <p>This is the last paragraph in another div.</p>
</div>

//Hiển thị CSS ở thẻ <p> vị trí thứ 3 hoặc tùy chọn

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("p").eq(3).css("background-color", "yellow");
});
</script>

<p>My name is Donald (index 0).</p>
<p>Donald Duck (index 1).</p>
<p>I live in Duckburg (index 2).</p> <<==
<p>My best friend is Mickey (index 3).</p>

//Hiển thị CSS thẻ <p> nhưng lọc chỉ hiển thị với thẻ p có class .intro

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("p").filter(".intro").css("background-color", "yellow");
});
</script>

<p>My name is Donald.</p>
<p class="intro">I live in Duckburg.</p>
<p class="intro">I love Duckburg.</p>
<p>My best friend is Mickey.</p>

//Ngược lại chỉ hiển thị CSS ở thẻ <p> không có class .intro

<script>
$(document).ready(function(){
    $("p").not(".intro").css("background-color", "yellow");
});
</script>

0 nhận xét:

Post a Comment

 

BACK TO TOP

Xuống cuối trang