คล้ายกับ jQuery .closest () แต่ข้ามลูกหลาน?

มีฟังก์ชั่นคล้ายกับjQuery .closest()แต่สำหรับการข้ามผ่านลูกหลานและส่งกลับเฉพาะคนที่ใกล้เคียงที่สุดหรือไม่?

ฉันรู้ว่ามี.find()ฟังก์ชั่น แต่ส่งคืนการจับคู่ที่เป็นไปได้ทั้งหมดไม่ใช่ใกล้เคียงที่สุด

แก้ไข:

นี่คือคำจำกัดความของคำที่ใกล้เคียงที่สุด(อย่างน้อยสำหรับฉัน) :

ประการแรกเด็กทุกคนจะถูกส่งผ่านจากนั้นเด็กแต่ละคนจะถูกข้ามผ่าน

ในตัวอย่างที่ระบุด้านล่างid='2'เป็น.closestลูกหลานที่ใกล้เคียงที่สุดของid="find-my-closest-descendant"

<div id="find-my-closest-descendant">
    <div>
        <div class="closest" Id='1'></div>
    </div>
    <div class="closest" Id='2'></div>
</div>

โปรดดูที่ลิงค์ JSfiddle

ตามคำจำกัดความของclosestคุณฉันได้เขียนปลั๊กอินต่อไปนี้:

(function($) {
    $.fn.closest_descendent = function(filter) {
        var $found = $(),
            $currentSet = this; // Current place
        while ($currentSet.length) {
            $found = $currentSet.filter(filter);
            if ($found.length) break;  // At least one match: break loop
            // Get all children of the current set
            $currentSet = $currentSet.children();
        }
        return $found.first(); // Return first match of the collection
    }    
})(jQuery);

หากลูกหลานที่ "ใกล้เคียงที่สุด" หมายถึงลูกคนแรกคุณสามารถทำได้:

$('#foo').find(':first');

หรือ:

$('#foo').children().first();

หรือหากต้องการค้นหาองค์ประกอบที่เกิดขึ้นเป็นครั้งแรกคุณสามารถทำได้:

$('#foo').find('.whatever').first();

หรือ:

$('#foo').find('.whatever:first');

แม้ว่าเราต้องการคำจำกัดความที่ชัดเจนว่า "ลูกหลานที่ใกล้เคียงที่สุด" หมายถึงอะไร

เช่น

<div id="foo">
    <p>
        <span></span>
    </p>
    <span></span>
</div>

ซึ่ง<span>จะ$('#foo').closestDescendent('span')กลับมา?

คุณสามารถใช้findกับ:firstตัวเลือก:

$('#parent').find('p:first');

บรรทัดข้างต้นจะได้พบกับครั้งแรกองค์ประกอบในลูกหลานของ<p>#parent

แล้วแนวทางนี้ล่ะ?

$('find-my-closest-descendant').find('> div');

ตัวเลือก "เด็กโดยตรง" นี้เหมาะกับฉัน

โซลูชัน Pure JS (ใช้ ES6)

export function closestDescendant(root, selector) {
  const elements = [root];
  let e;
  do { e = elements.shift(); } while (!e.matches(selector) && elements.push(...e.children));
  return e.matches(selector) ? e : null;
}

ตัวอย่าง

พิจารณาโครงสร้างต่อไปนี้:

div == $ 0
├── div == $ 1
│├── div
│├── div.findme == $ 4
│├── div
│└── div
├── div.findme == $ 2
│├── div
│└── div
└── div == $ 3
    ├── div
    ├── div
    └── div

closestDescendant($0, '.findme') === $2;
closestDescendant($1, '.findme') === $4;
closestDescendant($2, '.findme') === $2;
closestDescendant($3, '.findme') === null;

function closestDescendant(root, selector) {
  const elements = [root];
  let e;
  do { e = elements.shift(); } while (!e.matches(selector) && elements.push(...e.children));
  return e.matches(selector) ? e : null;
}

const [$0, $1, $2, $3, $4] = [0, 1, 2, 3, 4].map(x => document.querySelector(`#e${x}`));

console.log(closestDescendant($0, '.findme')); // $2
console.log(closestDescendant($1, '.findme')); // $4
console.log(closestDescendant($2, '.findme')); // $2
console.log(closestDescendant($3, '.findme')); // null

<div id="e0">
    <div id="e1">
        <div></div>
        <div id="e4" class="findme"></div>
        <div></div>
        <div></div>
    </div>
    <div id="e2" class="findme">
        <div></div>
        <div></div>
    </div>
    <div id="e3">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

ในกรณีที่มีคนกำลังมองหาโซลูชัน JS ที่บริสุทธิ์ (ใช้ ES6 แทน jQuery) นี่คือสิ่งที่ฉันใช้:

Element.prototype.QuerySelector_BreadthFirst = function(selector) {
    let currentLayerElements = [...this.childNodes];
    while (currentLayerElements.length) {
        let firstMatchInLayer = currentLayerElements.find(a=>a.matches && a.matches(selector));
        if (firstMatchInLayer) return firstMatchInLayer;
        currentLayerElements = currentLayerElements.reduce((acc, item)=>acc.concat([...item.childNodes]), []);
    }
    return null;
};

ฉันคิดว่าก่อนอื่นคุณต้องกำหนดความหมายที่ "ใกล้เคียงที่สุด" ก่อน หากคุณหมายถึงโหนดลูกหลานที่ตรงกับเกณฑ์ของคุณซึ่งเป็นระยะทางที่สั้นที่สุดในแง่ของลิงก์ผู้ปกครองการใช้ ": first" หรือ ".eq (0)" จะไม่ได้ผล:

<div id='start'>
  <div>
    <div>
      <span class='target'></span>
    </div>
  </div>
  <div>
    <span class='target'></span>
  </div>
</div>

ในตัวอย่างนั้น<span>องค์ประกอบ".target" ที่สอง " อยู่ใกล้" กับ "start" <div>มากกว่าเนื่องจากอยู่ห่างจากการกระโดดของผู้ปกครองเพียงครั้งเดียว หากนั่นคือสิ่งที่คุณหมายถึง "ใกล้ที่สุด" คุณจะต้องหาระยะทางต่ำสุดในฟังก์ชันตัวกรอง รายการผลลัพธ์จากตัวเลือก jQuery จะอยู่ในลำดับ DOM เสมอ

อาจจะ:

$.fn.closestDescendant = function(sel) {
  var rv = $();
  this.each(function() {
    var base = this, $base = $(base), $found = $base.find(sel);
    var dist = null, closest = null;
    $found.each(function() {
      var $parents = $(this).parents();
      for (var i = 0; i < $parents.length; ++i)
        if ($parents.get(i) === base) break;
      if (dist === null || i < dist) {
        dist = i;
        closest = this;
      }
    });
    rv.add(closest);
  });
  return rv;
};

นั่นคือประเภทของปลั๊กอินแฮ็คเนื่องจากวิธีสร้างวัตถุผลลัพธ์ แต่แนวคิดก็คือคุณต้องหาเส้นทางผู้ปกครองที่สั้นที่สุดจากองค์ประกอบที่ตรงกันทั้งหมดที่คุณพบ รหัสนี้เอนเอียงไปทางองค์ประกอบทางซ้ายในโครงสร้าง DOM เนื่องจากการ<ตรวจสอบ <=จะเอนเอียงไปทางขวา

ฉันปรุงสิ่งนี้แล้วยังไม่มีการใช้งานสำหรับตัวเลือกตำแหน่ง (พวกเขาต้องการมากกว่าแค่matchesSelector):

การสาธิต: http://jsfiddle.net/TL4Bq/3/

(function ($) {
    var matchesSelector = jQuery.find.matchesSelector;
    $.fn.closestDescendant = function (selector) {
        var queue, open, cur, ret = [];
        this.each(function () {
            queue = [this];
            open = [];
            while (queue.length) {
                cur = queue.shift();
                if (!cur || cur.nodeType !== 1) {
                    continue;
                }
                if (matchesSelector(cur, selector)) {
                    ret.push(cur);
                    return;
                }
                open.unshift.apply(open, $(cur).children().toArray());
                if (!queue.length) {
                    queue.unshift.apply(queue, open);
                    open = [];
                }
            }
        });
        ret = ret.length > 1 ? jQuery.unique(ret) : ret;
        return this.pushStack(ret, "closestDescendant", selector);
    };
})(jQuery);

อาจมีข้อบกพร่องบางอย่างแม้ว่าจะไม่ได้ทดสอบมากนัก

คำตอบของ Rob W ไม่ได้ผลสำหรับฉัน ฉันปรับให้เข้ากับสิ่งนี้ซึ่งได้ผล

//closest_descendent plugin
$.fn.closest_descendent = function(filter) {
    var found = [];

    //go through every matched element that is a child of the target element
    $(this).find(filter).each(function(){
        //when a match is found, add it to the list
        found.push($(this));
    });

    return found[0]; // Return first match in the list
}

ฉันจะใช้สิ่งต่อไปนี้เพื่อรวมเป้าหมายเองหากตรงกับตัวเลือก:

    var jTarget = $("#doo");
    var sel = '.pou';
    var jDom = jTarget.find(sel).addBack(sel).first();

มาร์กอัป:

<div id="doo" class="pou">
    poo
    <div class="foo">foo</div>
    <div class="pou">pooo</div>
</div>

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

หวังว่าจะมีคนได้รับประโยชน์

หมายเหตุ: การเรียกซ้ำได้รับสแต็กล้นและฉันปรับปรุงอีกอันตอนนี้จำลองเป็นคำตอบก่อนหน้านี้

jQuery.fn.extend( {

    closestChild_err : function( selector ) { // recursive, stack overflow when not found
        var found = this.children( selector ).first();
        if ( found.length == 0 ) {
            found = this.children().closestChild( selector ).first(); // check all children
        }
        return found;
    },

    closestChild : function( selector ) {
        var todo = this.children(); // start whith children, excluding this
        while ( todo.length > 0 ) {
            var found = todo.filter( selector );
            if ( found.length > 0 ) { // found closest: happy
                return found.first();
            } else {
                todo = todo.children();
            }
        }
        return $();
    },

});  

ปลั๊กอินต่อไปนี้ส่งคืนลูกหลานที่ใกล้เคียงที่สุดอันดับที่ n

$.fn.getNthClosestDescendants = function(n, type) {
  var closestMatches = [];
  var children = this.children();

  recursiveMatch(children);

  function recursiveMatch(children) {
    var matches = children.filter(type);

    if (
      matches.length &&
      closestMatches.length < n
    ) {
      var neededMatches = n - closestMatches.length;
      var matchesToAdd = matches.slice(0, neededMatches);
      matchesToAdd.each(function() {
        closestMatches.push(this);
      });
    }

    if (closestMatches.length < n) {
      var newChildren = children.children();
      recursiveMatch(newChildren);
    }
  }

  return closestMatches;
};

ฉันกำลังมองหาวิธีแก้ปัญหาที่คล้ายกัน (ฉันต้องการลูกหลานที่ใกล้เคียงที่สุดทั้งหมดนั่นคือความกว้างก่อน + การแข่งขันทั้งหมดไม่ว่าจะอยู่ในระดับใดก็ตาม) นี่คือสิ่งที่ฉันทำ:

var item = $('#find-my-closest-descendant');
item.find(".matching-descendant").filter(function () {
    var $this = $(this);
    return $this.parent().closest("#find-my-closest-descendant").is(item);
}).each(function () {
    // Do what you want here
});

ฉันหวังว่านี่จะช่วยได้.

คุณสามารถใส่

$("#find-my-closest-descendant").siblings('.closest:first');

มีบทความที่ยอดเยี่ยมที่ชี้ให้เห็นว่าสิ่งที่ OP ต้องการสามารถทำได้อย่างง่ายดายด้วย [Geeks for Geeks] ที่ใกล้เคียงที่สุด
1 https://www.geeksforgeeks.org/jquery-closest-with-examples/

คุณมีตัวเลือกมากมาย แต่$("#parent").children(".child");ก็คือ fastet ตรวจสอบบทความนี้เพื่อดูรายละเอียดและเกณฑ์มาตรฐาน