Question

我在表单系统中有HTML结构，其中html节点将具有data-src =＆＃34; formname＆＃34;这将包含许多带有data-fld =＆＃34; fieldname＆＃34;的html节点。这很容易解析，但有时一个字段可以是一个子窗体的主机，它本身包含data-src和data-fld。

当我使用jquery find选择器搜索[data-src =＆＃39; name＆＃39;]时，我得到了直接的data-fld元素和包含在子data-src中的元素，我只想要前者而不是后者。

我创建了一个fiddle来演示：

<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语句起作用，我认为能够选择＆＃34; [data-fld]＆＃34;最近的＆＃34; [data-src]＆＃34;是我正在研究的那个，我想知道（a）是否有固有的JQuery / CSS选择方式这样做，或者（b）是否有更好的解决方案。

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

Answer 1

使用即时children选择器

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

Jquery - 查找start元素与该选择器

1 个答案: