[英]Selecting relative child tags jquery
I am currently new to JavaScript (I am using jQuery) and I was wondering how I could select all the children Something
tags from the following HTML 我目前是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>
I had code like so to select both the child Something
tags 我有这样的代码来选择孩子的Something
标签
$("Something[attribute='first']").children("Something").each({});
but this does not work because of the div in between. 但这不起作用,因为它们之间的div。 How can I bypass all tags that are not Something
and select only those elements that are one level deep if you remove all the tags that are not Something
? 我如何绕过所有不是Something
的标签,如果删除所有不是Something
的标签,只选择那些深度为一级的元素? So if I want to query the children of the Something
tag with attribute first
I would get second
and third
(not fourth
or sixth
). 因此,如果我想first
使用属性查询Something
标签的子项,我将得到second
和third
(不是fourth
或sixth
)。 Similarly if I query fifth
I would get sixth
同样,如果我查询fifth
我会得到sixth
NOTE Sorry for being unclear about this but I only want the Something
tags one level after the Something
tag whose children I am trying to find. 注:对不起,我不清楚自己这一点,但我只希望Something
标签后一个层面Something
标记他们的孩子,我试图找到。 So for example in the above HTML I do not want the query to return the Something
tag with attribute fourth
. 因此,例如在上面的HTML中,我不希望查询返回带有属性fourth
的Something
标记。 So in essence if you strip out the tags in between every other Something
tag I want the tags that are only one level deep from the one in question . 所以从本质上讲,如果你在其他Something
标签之间删除标签,我希望标签只与相关的标签相距一层 。
NOTE There can be other tags in between the Something
tags, not just the one div
. 注意 Something
标签之间可以有其他标签,而不仅仅是一个div
。 For example the above can be 例如以上可以
<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>
and the same selection criteria would apply. 并适用相同的选择标准。 So the results would be 所以结果会是
first -> [second, third]
third -> [fourth]
[fifth] -> [sixth]
A recursive solution in pseudocode for what I want would be 我想要的伪代码的递归解决方案
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);
}
});
}
and you would call this as so 你会这样称呼它
var array_of_children = get_immediate_children_for($("Something[attribute='first']"));
JSFiddle: https://jsfiddle.net/qdhnfdcx/ 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);
Do the following: 请执行下列操作:
var allChildren = document.getElementsByTagName("Something");
Then you can simply select the corresponding index: 然后你可以简单地选择相应的索引:
allChildren[0];
allChildren[1];
Or you could loop and edit all of them: 或者你可以循环编辑所有这些:
for (var i = 0, len = allChildren.length; i < len; i++) {
allChildren[i].style.display = "none";
}
If you want certain somethings not to appear then do: 如果你想要某些事情没有出现,那么做:
for (var i = 0, len = allChildren.length; i < len; i++) {
if(allChildren[i].getAttribute("attribute") != "fourth") {
allChildren[i].style.display = "none";
}
}
If you only want the something tags one level after the something tags: 如果你只想在某个标签之后的某个级别标记:
for (var i = 0, len = allChildren.length; i < len; i++) {
if(allChildren[i].className == allChildren[i].parentElement.className) {
allChildren[i].style.display = "none";.
}
}
EDIT (due to edited question) 编辑(由于编辑问题)
If you want a single level after the child of a specific element, then use something like this: 如果你想在一个特定元素的子元素之后的单个级别,那么使用这样的东西:
$("Something[attribute='first']").children("div").children("Something").each({});
Instead of .children() use .find() 相反的。孩子()使用.find()
(from jquery docs) (来自jquery docs)
The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well. .children()方法与.find()的不同之处在于.children()只沿DOM树向下移动一个级别,而.find()可以遍历多个级别以选择后代元素(孙子等)。
var smth = document.getElementsByTagName('Something')[0];
var chindren = smth.getElementsByTagName('Something');
for(var i = 0, el;el = children[i];++i){
//do what you want
}
Edit 1 (final) 编辑1(最终)
I answered to the first edition of the question. 我回答了问题的第一版。
Possible answer is to convert / read current document as XML and manage accordingly. 可能的答案是将当前文档转换/读取为XML并进行相应管理。 Or parse inner/outerHTML to a node tree. 或者将inner / outerHTML解析为节点树。 There are a lot of pitfalls on both ways (including browser comatibility, at least) but it is the only approach to the problem. 两种方式都存在很多陷阱(至少包括浏览器的可兼容性),但这是解决问题的唯一方法。
$("Something").each(function() {
var childSomething = $(this).find("Something");
$.each(childSomething,function() {
//do something
});
});
You can use jquery find function to achieve that. 您可以使用jquery find函数来实现这一点。 Like this: 像这样:
$("Something[attribute='first']").find("div > Something").each({});
Thanks for the answers! 谢谢你的回答! I do not believe that jQuery or Javascript either have a native way to do this but a simple recursive solution to this would be 我不相信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);
}
});
}
So that now get_immediate_children_for($("Activity[path='']"))
would return the elements one level deep ignoring all other tags 所以现在get_immediate_children_for($("Activity[path='']"))
将返回一级深度忽略所有其他标签的元素
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.