การเลือกเฉพาะองค์ประกอบระดับแรกใน jquery

ฉันจะเลือกองค์ประกอบลิงก์ของผู้ปกครอง<ul>จากรายการเช่นนี้ได้อย่างไร

<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a>
  <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>

ดังนั้นใน css ul li aแต่ไม่ใช่ul li ul li a

ขอบคุณ

$("ul > li a")

แต่คุณจะต้องตั้งค่าคลาสบนรูท ul หากคุณต้องการกำหนดเป้าหมายที่อยู่นอกสุดโดยเฉพาะ:

<ul class="rootlist">
...

จากนั้นก็:

$("ul.rootlist > li a")....

อีกวิธีหนึ่งในการตรวจสอบให้แน่ใจว่าคุณมีองค์ประกอบราก li เท่านั้น

$("ul > li a").not("ul li ul a")

มันดูไม่ดี แต่ควรทำเคล็ดลับ

เมื่อคุณมี ul เริ่มต้นคุณสามารถใช้วิธีchildren ()ซึ่งจะพิจารณาเฉพาะลูกขององค์ประกอบเท่านั้น ดังที่ @activa ชี้ให้เห็นวิธีหนึ่งในการเลือกองค์ประกอบรูทได้อย่างง่ายดายคือการให้คลาสหรือ id ต่อไปนี้จะถือว่าคุณมียูรากที่มี rootID

$('ul#root').children('li');

ตามที่ระบุไว้ในคำตอบอื่น ๆ วิธีที่ง่ายที่สุดคือการระบุองค์ประกอบรูทโดยไม่ซ้ำกัน (ตาม ID หรือชื่อคลาส) และใช้ตัวเลือกที่สืบทอดโดยตรง

$('ul.topMenu > li > a')

อย่างไรก็ตามฉันเจอคำถามนี้เพื่อค้นหาวิธีแก้ปัญหาซึ่งจะใช้ได้กับองค์ประกอบที่ไม่มีชื่อในระดับความลึกที่แตกต่างกันของ DOM

สามารถทำได้โดยการตรวจสอบแต่ละองค์ประกอบและตรวจสอบให้แน่ใจว่าไม่มีพาเรนต์อยู่ในรายการองค์ประกอบที่ตรงกัน นี่คือวิธีแก้ปัญหาของฉันซึ่งรวมอยู่ในตัวเลือก jQuery 'บนสุด'

jQuery.extend(jQuery.expr[':'], {
  topmost: function (e, index, match, array) {
    for (var i = 0; i < array.length; i++) {
      if (array[i] !== false && $(e).parents().index(array[i]) >= 0) {
        return false;
      }
    }
    return true;
  }
});

การใช้สิ่งนี้วิธีแก้ปัญหาสำหรับโพสต์ต้นฉบับคือ:

$('ul:topmost > li > a')

// Or, more simply:
$('li:topmost > a')

กรอก jsFiddle ใช้ได้ที่นี่

เพียงแค่ใช้สิ่งนี้ ..

$("ul li a").click(function() {
  $(this).parent().find(">ul")...Something;
}

ดูตัวอย่าง: https://codepen.io/gmkhussain/pen/XzjgRE

คุณอาจต้องการลองสิ่งนี้หากผลลัพธ์ยังคงไหลลงสู่กลุ่มย่อยในหลาย ๆ กรณี JQuery จะยังคงใช้กับเด็ก

$("ul.rootlist > li > a")

ใช้วิธีนี้: E> F จับคู่องค์ประกอบ F ใด ๆ ที่เป็นลูกขององค์ประกอบ E

บอกให้ JQuery มองหาเด็กที่ไม่เหมาะสมเท่านั้น http://www.w3.org/TR/CSS2/selector.html

คุณยังสามารถใช้$("ul li:first-child")เพื่อรับลูกโดยตรงของ UL เท่านั้น

ฉันเห็นด้วยคุณต้องมี ID หรืออย่างอื่นเพื่อระบุ UL หลักมิฉะนั้นจะเลือกทั้งหมด หากคุณมี div ที่มี ID รอบ ๆ UL สิ่งที่ง่ายที่สุดที่จะทำคือ$("#someDiv > ul > li")

ลองสิ่งนี้:

$("#myId > UL > LI")

ฉันมีปัญหากับคลาสที่ซ้อนกันจากระดับความลึกใด ๆ ดังนั้นฉันจึงคิดออก จะเลือกเฉพาะระดับแรกที่พบ Jquery Object ที่มี:

var $elementsAll = $("#container").find(".fooClass");4

var $levelOneElements = $elementsAll.not($elementsAll.children().find($elementsAll));

$levelOneElements.css({"color":"red"})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fooClass" style="color:black">
Container
  <div id="container">
    <div class="fooClass" style="color:black">
      Level One
      <div>
        <div class="fooClass" style="color:black">
             Level Two
        </div>
      </div>
    </div>
    <div class="fooClass" style="color:black">
      Level One
      <div>
        <div class="fooClass" style="color:black">
             Level Two
        </div>
      </div>
    </div>
  </div>
</div>

1

 $("ul.rootlist > target-element")
2   $("ul.rootlist").find(target-element).eq(0) (only one instance)
3   $("ul.rootlist").children(target-element)

อาจมีวิธีอื่น ๆ อีกมากมาย

.add_to_cart >>> .form-item:eq(1)

. form-item ที่สองที่ลูกระดับต้นไม้จาก. add_to_cart