jQuery-查找所有起始元素与该选择器最接近的父元素匹配的元素

Question

我在表单系统中有HTML结构，其中html节点将具有data-src =“ formname”，并且其中将包含许多具有data-fld =“ fieldname”的html节点。 这很容易解析，但是有时字段可以是本身包含data-src和data-fld的子窗体的宿主。

当我使用jquery查找选择器搜索[data-src ='name']时，我同时获得了直接data-fld元素和包含在子data-src中的元素，我只希望前者而不是后者。

我创建了一个小提琴来演示：

<div data-src="mainform">

  <div data-fld="field1">fld1</div>
  <div data-fld="field2">
    <div data-src="subform">
      <div data-fld="subfield1">subfld1</div>
    </div>
  </div>

</div>

<div id="info"></div>

和JS：

var result = "";
var find = "mainform";
var src = $("[data-src='" + find + "']");
src.find("[data-fld]").each(function() {
  var ele = $(this);
  if (ele.closest("[data-src='" + find + "']") === src) {
    result += "Child field : " + $(this).data("fld") + " ";
  }
});

$("#info").text(result);

上面的代码通过该IF语句起作用，我认为能够选择其中最接近的“ [data-src]”是我正在处理的“ [data-fld]”会很好，并且我想知道（a）是否有一种固有的JQuery / CSS选择器方式执行此操作，或者（b）是否有针对此代码的更好解决方案。

不仅因为我们想要优雅的代码，而且因为每次循环迭代都要求最接近值可能会成为性能问题。

Answer 1

使用直接子选择器

var result = "";
var find = "mainform";
var src = $("[data-src='" + find + "']");
src.find("[data-fld]").first().each(function() {
  var ele = $(this);
  result += "Child field : " + $(this).data("fld") + " ";
});

$("#info").text(result);