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的所有标记并仅选择一级深度的元素？因此，如果我想查询属性为Something的{{1}}代码的子代，我会得到first和second（不是third或fourth ）。同样，如果我查询sixth，我会得到fifth

注意很抱歉不清楚这一点，但我只希望sixth代码位于我想要查找其子代的Something标记之后一级。例如，在上面的HTML中，我不希望查询返回带有属性Something的{{1}}标记。 所以从本质上讲，如果你在每个其他Something标签之间删除标签，我希望标签只与有问题的标签相距一层。

注意 fourth标记之间可能还有其他标记，而不仅仅是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]

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

如果您只想在标记之后标记一个标记：

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

Answer 2

编辑（由于编辑过的问题）

如果您想在特定元素的子元素之后使用单个级别，请使用以下内容：

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

而不是.children()使用.find()

（来自jquery docs）

.children（）方法与.find（）的不同之处在于.children（）只沿DOM树向下移动一个级别，而.find（）可以遍历多个级别以选择后代元素（孙子等）同样。

Answer 3

var smth = document.getElementsByTagName('Something')[0];
var chindren = smth.getElementsByTagName('Something');
for(var i = 0, el;el = children[i];++i){
//do what you want
}

编辑1（最终）
我回答了第一版的问题可能的答案是将当前文档转换/读取为XML并进行相应管理。或者将inner / outerHTML解析为节点树。两种方式都存在很多陷阱（至少包括浏览器的可兼容性），但这是解决问题的唯一方法。

Answer 4

$("Something").each(function() {
var childSomething = $(this).find("Something");
$.each(childSomething,function() {
//do something
});
});

Answer 5

您可以使用jquery find函数来实现。像这样：

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

Answer 6

感谢您的回答！我不相信jQuery或Javascript要么有本机方式来做这个，但一个简单的递归解决方案将是

function get_immediate_children_for(element) {
    var array_of_children = [];
    get_immediate_children_for_helper(element, array_of_children);
    console.log(array_of_children);
    return array_of_children;
}
function get_immediate_children_for_helper(element, array_of_children) {
    $(element).children().each(function() {
        console.log(this.tagName);
        if (this.tagName == "ACTIVITY") {
            array_of_children.push(this);
            console.log(array_of_children);
        }
        else {
            get_immediate_children_for_helper(this, array_of_children);
        }
    });
}

所以现在get_immediate_children_for($("Activity[path='']"))会将元素返回一级，忽略所有其他标记

选择相对子标签jquery

6 个答案: