选择相对子标签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";
  }
}

如果你只想在某个标签之后的某个级别标记：

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({});

---

相反的。孩子（）使用.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='']"))将返回一级深度忽略所有其他标签的元素