jQuery Academy · บทเรียน

การยกเว้นองค์ประกอบด้วย .not()

เชี่ยวชาญเมธอด .not() เพื่อยกเว้นองค์ประกอบเฉพาะจากชุดที่ตรงกันได้อย่างแม่นยำ ปรับปรุงการเลือก และป้องกันการดำเนินการที่ไม่ตั้งใจกับองค์ประกอบบางรายการ

การยกเว้นองค์ประกอบด้วย .not() เป็นบทเรียน jQuery Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน jQuery Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

รู้จัก .not()

ยินดีต้อนรับ ในบทเรียนนี้ เราจะทำความเข้าใจเมธอด .not() อันทรงพลังของ jQuery ให้เชี่ยวชาญ เมธอดนี้จำเป็นสำหรับปรับการเลือกองค์ประกอบให้ละเอียดขึ้น

เมธอด .not() ช่วยให้คุณตัดองค์ประกอบที่ระบุออกจากชุดองค์ประกอบที่จับคู่ได้ ทำให้ควบคุมได้อย่างแม่นยำว่าการดำเนินการของคุณจะส่งผลต่อองค์ประกอบใดบ้าง

ตัดออกด้วยสตริงตัวเลือก

วิธีใช้ .not() ที่พบบ่อยที่สุดคือส่งสตริงตัวเลือก CSS เข้าไป จากนั้น jQuery จะนำองค์ประกอบในชุดการเลือกปัจจุบันที่ตรงกับตัวเลือกใหม่นี้ออก

เลือกองค์ประกอบในวงกว้างก่อน
จากนั้นใช้ .not() เพื่อกรององค์ประกอบที่ไม่ต้องการออก

วิธีนี้มีประโยชน์เมื่อเลือก 'ทุกอย่าง' ก่อน แล้วค่อยระบุสิ่งที่ต้องการ 'นำออก' ได้ง่ายกว่า

.not() กับตัวเลือกคลาส

ลองดูตัวอย่างนี้ เราจะเลือกองค์ประกอบ div ทั้งหมด แล้วใช้ .not() เพื่อตัดองค์ประกอบที่มีคลาส .special ออก ดังนั้นจะจัดรูปแบบเฉพาะ div ที่ไม่มีคลาสพิเศษเท่านั้น

<!DOCTYPE html>
<html>
<head>
<style>
  .red { color: red; }
</style>
</head>
<body>
  <div class="box">Item 1</div>
  <div class="box special">Item 2</div>
  <div class="box">Item 3</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Select all .box divs, then exclude the one with .special
      $('.box').not('.special').addClass('red');
    });
  </script>
</body>
</html>

ตัดองค์ประกอบที่ระบุออก

นอกจากสตริงตัวเลือกแล้ว คุณยังสามารถส่งองค์ประกอบ DOM หรือออบเจ็กต์ jQuery ไปยัง .not() ได้โดยตรง

วิธีนี้สะดวกเมื่อคุณมีข้อมูลอ้างอิงไปยังองค์ประกอบที่ต้องการตัดออกจากการเลือกปัจจุบันอยู่แล้ว

.not() กับข้อมูลอ้างอิงองค์ประกอบ

ในตัวอย่างนี้ เราจะเลือกองค์ประกอบรายการทั้งหมด (<li>) จากนั้นระบุรายการหนึ่งโดยใช้ ID (#item2) และใช้ .not() เพื่อตัดรายการนั้นออกจากการจัดรูปแบบ

<!DOCTYPE html>
<html>
<head>
<style>
  .bold { font-weight: bold; }
</style>
</head>
<body>
  <ul>
    <li>List Item 1</li>
    <li id="item2">List Item 2</li>
    <li>List Item 3</li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Select all <li>, then exclude the specific #item2
      $('li').not($('#item2')).addClass('bold');
    });
  </script>
</body>
</html>

การตัดออกแบบกำหนดเองด้วยฟังก์ชัน

สำหรับตรรกะการตัดออกที่ทำงานแบบไดนามิกสูงหรือมีความซับซ้อน คุณสามารถส่งฟังก์ชันไปยัง .not() ได้

ฟังก์ชันจะทำงานกับแต่ละองค์ประกอบในชุดปัจจุบัน
หากฟังก์ชันคืนค่าเป็น true องค์ประกอบนั้นจะถูกตัดออก
this หมายถึงองค์ประกอบ DOM ปัจจุบันที่กำลังประมวลผล

.not() กับตัวอย่างฟังก์ชัน

ในที่นี้ เราต้องการจัดรูปแบบย่อหน้าทั้งหมด ยกเว้นย่อหน้าที่มีคำว่า 'exclude' ฟังก์ชันจะตรวจสอบเนื้อหาข้อความของแต่ละย่อหน้า

<!DOCTYPE html>
<html>
<head>
<style>
  .italic { font-style: italic; }
</style>
</head>
<body>
  <p>This is a normal paragraph.</p>
  <p>This paragraph contains 'exclude'.</p>
  <p>Another normal paragraph here.</p>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('p').not(function() {
        // Exclude paragraphs containing 'exclude'
        return $(this).text().includes('exclude');
      }).addClass('italic');
    });
  </script>
</body>
</html>

เชื่อม .not() เพื่อความแม่นยำ

คุณสามารถเรียกใช้ .not() ต่อกันหลายครั้ง หรือใช้ .not() ร่วมกับเมธอดการกรองอื่น ๆ เพื่อสร้างการเลือกที่แม่นยำมาก

การเรียกใช้ .not() แต่ละครั้งจะปรับชุดองค์ประกอบปัจจุบันให้ละเอียดขึ้น โดยนำองค์ประกอบออกเพิ่มขึ้นเรื่อย ๆ ลองนึกภาพว่าเป็นการลอกชั้นขององค์ประกอบที่ไม่ต้องการออกทีละชั้น

ควรใช้ .not() เมื่อใด

.not() มีประโยชน์อย่างมากในสถานการณ์ต่อไปนี้:

คุณมีการเลือกเริ่มต้นแบบกว้าง ๆ และต้องการนำองค์ประกอบบางประเภทออก
คุณต้องการตัดองค์ประกอบที่มีข้อมูลอ้างอิงโดยตรงอยู่แล้วออก
การเขียนว่า 'ทั้งหมด ยกเว้นสิ่งเหล่านี้' ทำให้โค้ดชัดเจนและอ่านง่ายขึ้น

นี่เป็นวิธีที่เรียบง่ายในการจำกัดขอบเขตการเลือก โดยไม่ต้องเขียนตัวเลือกแบบปฏิเสธที่ซับซ้อนตั้งแต่ต้น

ตรวจสอบอย่างรวดเร็ว: การใช้ .not()

พิจารณา HTML ต่อไปนี้ โค้ด jQuery ข้อมูลใดจะเลือกองค์ประกอบ <p> ทั้งหมดยกเว้นองค์ประกอบที่มี ID "intro" ได้ถูกต้อง

<div>
  <p>Paragraph 1</p>
  <p id="intro">Introduction</p>
  <p>Paragraph 3</p>
</div>

ทบทวน: เชี่ยวชาญ .not()

คุณเชี่ยวชาญเมธอด .not() ของ jQuery ได้สำเร็จแล้ว

เราได้เรียนรู้ว่า .not() มีความสำคัญต่อการปรับการเลือกให้ละเอียดขึ้น โดยตัดองค์ประกอบออกตาม:

สตริงตัวเลือก CSS (เช่น .not('.hide'))
องค์ประกอบ DOM หรือออบเจ็กต์ jQuery ที่ระบุ (เช่น .not(myElement))
ฟังก์ชันสำหรับตรรกะการตัดออกแบบกำหนดเองและทำงานแบบไดนามิก

ฝึกฝนต่อไปเพื่อทำให้การเลือกด้วย jQuery ของคุณแม่นยำและมีประสิทธิภาพยิ่งขึ้น

คำถามที่พบบ่อย

บทเรียน “การยกเว้นองค์ประกอบด้วย .not()” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การยกเว้นองค์ประกอบด้วย .not()” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส jQuery Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การยกเว้นองค์ประกอบด้วย .not()”

เชี่ยวชาญเมธอด .not() เพื่อยกเว้นองค์ประกอบเฉพาะจากชุดที่ตรงกันได้อย่างแม่นยำ ปรับปรุงการเลือก และป้องกันการดำเนินการที่ไม่ตั้งใจกับองค์ประกอบบางรายการ คุณปฏิบัติ jQuery Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน jQuery Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน jQuery Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน

บทเรียน “การยกเว้นองค์ประกอบด้วย .not()” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน jQuery Academy นี้ได้ไหม

ได้ บทเรียน jQuery Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ jQuery Academy