javascript - 选择相对子标签jquery

Question

我目前是 JavaScript 的新手(我正在使用 jQuery)，我想知道如何从以下 HTML 中选择所有子 Something 标签

<Something attribute="first">
    <div class="container">
        <Something attribute="second" />
        <Something attribute="third">
            <Something attribute="fourth" />
        </Something>
    </div>
</Something>
<Something attribute="fifth">
    <Something attribute="sixth" />
</Something>

我有这样的代码来选择子 Something 标签

$("Something[attribute='first']").children("Something").each({});

但是由于中间的 div，这不起作用。如果删除所有不是 Something 的标签，我如何绕过所有不是 Something 的标签并仅选择那些深度为一层的元素？因此，如果我想查询具有属性 first 的 Something 标记的子项，我将得到 second 和 third (不是 fourth 或 sixth)。同样，如果我查询 fifth，我会得到 sixth

注意 抱歉，我对此不清楚，但我只想要 Something 标签在我尝试添加其子项的 Something 标签之后一级寻找。因此，例如在上面的 HTML 中，我不希望查询返回具有属性 fourth 的 Something 标记。 所以从本质上讲，如果您去掉所有其他 Something 标签之间的标签，我想要的标签只比相关标签深一层。

注意 Something 标签之间可以有其他标签，而不仅仅是一个div。例如上面的可以是

<Something attribute="first">
    <div class="container">
        <div class="container">
            <Something attribute="second" />
            <Something attribute="third">
                <Something attribute="fourth" />
            </Something>
        </div>
    </div>
</Something>
<Something attribute="fifth">
    <div>
        <div>
            <Something attribute="sixth" />
        </div>
    </div>
</Something>

并且将应用相同的选择标准。所以结果会是

first -> [second, third]
third -> [fourth]
[fifth] -> [sixth]

我想要的伪代码递归解决方案是

function get_immediate_children_for(element, array_of_children) {
    $(element).children().each(function() {
        if (this.tagName == "SOMETHING") {
            array_of_children.push(this);
        }
        else {
            get_immediate_children_for(this, array_of_children);
        }
    });
}

你会这样调用它

var array_of_children = get_immediate_children_for($("Something[attribute='first']")); 

Answer 1

JSFiddle:https://jsfiddle.net/qdhnfdcx/

var elem = document.getElementsByTagName("something");

function getChildren(name) {
    var list = []
  var len = name.length;

  for (var i = 0; i < len; i++) {
    if(name[i].parentElement.className != name[i].className) {
      for (var j = 0; j < len; j++) {
        return list.push(name[i].children[j]));
      }
    }
  }
}

getChildren(elem);

执行以下操作:

var allChildren = document.getElementsByTagName("Something");

然后你可以简单地选择相应的索引:

allChildren[0];
allChildren[1];

或者您可以循环并编辑所有这些:

for (var i = 0, len = allChildren.length; i < len; i++) {
  allChildren[i].style.display = "none";
}

如果你不想让某些东西出现那么做:

for (var i = 0, len = allChildren.length; i < len; i++) {
  if(allChildren[i].getAttribute("attribute") != "fourth") {
    allChildren[i].style.display = "none";
  }
}

如果你只想要在 something 标签后一层的 something 标签:

for (var i = 0, len = allChildren.length; i < len; i++) {
  if(allChildren[i].className == allChildren[i].parentElement.className) {
    allChildren[i].style.display = "none";.
  }
}