選擇相對子標簽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='']"))將返回一級深度忽略所有其他標簽的元素