在循环中，找到位于顶层或子级的跨度

Question

这是fiddle

在循环函数中，我将获得在顶层具有span 元素的html 字符串，也可以作为div 中的子元素。在这两种情况下我怎样才能找到它？

我知道find 只搜索儿童。甚至不知道当它位于顶层时如何找到它，如下面的data2？如果我这样做了，那么我想我会先做一个find，如果它的长度为0，然后在顶层搜索span。

var data1 = "<div class='form-group'><span class='editableColumn'>NAT</span><input type='text' class='editableColumn form-control' style='display:none' name='Lot' value='NAT'></div>";

var data2 = "<span class='editableColumn'>Yes</span><input type='checkbox' name='IsBackorder' class='editableColumn editor-active' style='display:none' checked='checked' value='true'>";
var myStringArray = [data1, data2];
var arrayLength = myStringArray.length;


$(document).ready(function() {
  for (var i = 0; i < arrayLength; i++) {
    console.log(myStringArray[i]);
    //Do something
    var span = $(data1).find("span.editableColumn").text();
    $("#" + i).text(span);
  }

})

Answer 1

如果您愿意，可以使用 .addBack() 在一行中完成。

$(document).ready(function() {
  for (var i = 0; i < arrayLength; i++) {
    var span = $(myStringArray[i]).find("span.editableColumn").addBack("span.editableColumn").text();
    $("#" + i).text(span);
  }
})

http://jsfiddle.net/a21sk6dx/

Answer 2

如果你的 HTML 有父级，你可以这样做：$(myStringArray[i]).parent().closest("span.editableColumn").text();

既然你不这样做，你要么需要将你的 data2 包装在 a 中，要么尝试 find then nearest：

$(document).ready(function() {
  for (var i = 0; i < arrayLength; i++) {
    console.log();
    //Do something
    var span = $(myStringArray[i]).find("span.editableColumn").text();
    if (!span) span = $(myStringArray[i]).closest("span.editableColumn").text();
    $("#" + (i + 1)).text(span);
  }
})

另外，请注意：你有 i=0, $("#" + (i + 1))