Tương tự như jQuery .closest () nhưng truyền tải con cháu?

Có một chức năng tương tự jQuery .closest()nhưng để vượt qua con cháu và chỉ trả lại những người thân nhất?

Tôi biết rằng có .find()chức năng, nhưng nó trả về tất cả các kết quả khớp có thể, không phải gần nhất.

Biên tập:

Đây là định nghĩa gần nhất (ít nhất là đối với tôi) :

Ở nơi đầu tiên tất cả trẻ em được đi qua, sau đó mỗi cá nhân trẻ em được đi qua.

Trong ví dụ đưa ra dưới đây id='2'là .closesthậu duệ gần nhất củaid="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>

Vui lòng xem liên kết JSfiddle .

Theo định nghĩa của bạn closest, tôi đã viết plugin sau:

(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);

Nếu theo hậu duệ "gần nhất", bạn có nghĩa là đứa con đầu lòng thì bạn có thể làm:

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

Hoặc là:

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

Hoặc, để tìm kiếm sự xuất hiện đầu tiên của một yếu tố cụ thể, bạn có thể làm:

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

Hoặc là:

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

Thực sự, chúng ta cần một định nghĩa vững chắc về "hậu duệ gần nhất" nghĩa là gì.

Ví dụ

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

Mà <span>sẽ $('#foo').closestDescendent('span')trở lại?

Bạn có thể sử dụng findvới :firstbộ chọn:

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

Dòng trên sẽ tìm thấy <p>phần tử đầu tiên trong hậu duệ của #parent.

Phương pháp này thì sao?

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

Công cụ chọn "con trực tiếp" này hoạt động với tôi.

Giải pháp thuần túy (sử dụng 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;
}

Thí dụ

Xem xét cấu trúc sau:

div == $ 0
├── div == $ 1
├ ─
│ ├── div.findme == $ 4
├ ─
└ ─
├── div.findme == $ 2
├ ─
└ ─
└── 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>

Trong trường hợp ai đó đang tìm kiếm một giải pháp JS thuần túy (sử dụng ES6 thay vì jQuery), đây là giải pháp tôi sử dụng:

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;
};

Tôi nghĩ rằng trước tiên bạn phải xác định "gần nhất" nghĩa là gì. Nếu bạn có nghĩa là nút con cháu phù hợp với tiêu chí của bạn là khoảng cách ngắn nhất về các liên kết của cha mẹ, thì sử dụng ": đầu tiên" hoặc ".eq (0)" sẽ không nhất thiết phải hoạt động:

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

Trong ví dụ đó, <span>phần tử ".target" thứ hai " gần" hơn với "bắt đầu" <div>, bởi vì nó chỉ cách một bước nhảy của cha mẹ. Nếu đó là những gì bạn muốn nói là "gần nhất", bạn cần tìm khoảng cách tối thiểu trong chức năng lọc. Danh sách kết quả từ bộ chọn jQuery luôn theo thứ tự DOM.

Có lẽ:

$.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;
};

Đó là một loại plugin hack vì cách nó xây dựng đối tượng kết quả, nhưng ý tưởng là bạn phải tìm ra con đường ngắn nhất của cha mẹ trong số tất cả các yếu tố phù hợp bạn tìm thấy. Mã này thiên về các phần tử bên trái trong cây DOM vì <kiểm tra; <=sẽ thiên vị ngay.

Tôi đã làm điều này, không có triển khai cho các bộ chọn vị trí (chúng cần nhiều hơn chỉ matchesSelector):

Bản trình diễn: 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);

Có lẽ có một số lỗi mặc dù, đã không kiểm tra nó rất nhiều.

Câu trả lời của Rob W không hiệu quả lắm đối với tôi. Tôi đã điều chỉnh nó để làm việc này.

//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
}

Tôi sẽ sử dụng cách sau để bao gồm chính mục tiêu nếu nó khớp với bộ chọn:

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

Đánh dấu:

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

Mặc dù đó là một chủ đề cũ nhưng tôi không thể cưỡng lại việc thực hiện chương trình gần gũi nhất của mình. Cung cấp hậu duệ đầu tiên được tìm thấy với ít đi du lịch nhất (hơi thở đầu tiên). Một là đệ quy (yêu thích cá nhân), khác là sử dụng danh sách việc cần làm để không có đệ quy như các tiện ích mở rộng jQquery.

Hy vọng ai đó có lợi.

Lưu ý: Đệ quy được tràn ngăn xếp và tôi đã cải thiện cái khác, bây giờ giống như câu trả lời trước đó.

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 $();
    },

});  

Các plugin sau trả về hậu duệ gần nhất thứ 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;
};

Tôi đang tìm kiếm một giải pháp tương tự (tôi muốn tất cả các hậu duệ gần nhất, tức là chiều rộng đầu tiên + tất cả các trận đấu bất kể nó tồn tại ở cấp độ nào), đây là những gì tôi đã làm:

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
});

Tôi hi vọng cái này giúp được.

Bạn chỉ có thể đặt

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

Có một bài viết xuất sắc chỉ ra rằng những gì OP yêu cầu có thể đạt được một cách dễ dàng với [Geek for Geek gần nhất]
1 https://www.geekforgeek.org/jquery-closest-with-examples/

bạn có rất nhiều lựa chọn, tuy nhiên $("#parent").children(".child");là fastet. kiểm tra bài viết này để biết chi tiết và điểm chuẩn