Question

我有以下HTML：

<li>
    First Node
  <ul>
    <li>child</li>
    <ul>
        <li id="idTest">child of child</li>
    </ul>
    <li>child2</li>
  </ul>
</li>

我想为ul的父li添加一个样式，其id为{idTest“。请注意，所有ul都没有id，并且不应将样式添加到li“child2”

我找不到合适的答案，请帮忙。

Answer 1

请注意，您的HTML无效，ul元素不能将ul元素作为直接子元素。您必须将嵌套的ul放在li或类似内容中。

您可以从parentNode属性中获取元素的父元素（如果需要，可以重复）。例如：

var element = document.getElementById("idTest").parentNode;
while (element.tagName !== "BODY") {
    if (element.tagName === "UL") {
        // Add the style
    }
    element = element.parentNode;
}

示例（已更正的HTML）：

var element = document.getElementById("idTest").parentNode;
while (element.tagName !== "BODY") {
    if (element.tagName === "UL") {
        element.style.display = "block";
    }
    element = element.parentNode;
}

/* The default display for UL is block, so I assume you're hiding them or similar */
ul {
  display: hide;
}

<ul>
  <li>
      First Node
    <ul>
      <li>child</li>
      <li>
        <ul>
            <li id="idTest">child of child</li>
        </ul>
      </li>
      <li>child2</li>
    </ul>
  </li>
</ul>

请注意......并且不应将样式添加到li“child2”

如果您将样式添加到ul的祖父母#idTest，根据它的样式，它可能会被继承。如果是这样，您可能需要在后代ul或li s上覆盖该样式。

你在评论中说过你将添加display: block，所以这不是问题; display不是继承的。

Answer 2

如果你使用jQuery而不是纯javascript，你可以试试.parentsUntil

示例

$('.activatoror').click(function() { $('#idTest').parentsUntil($('.ul-1'), 'ul').css('backgroundColor', 'red'); })

body { margin: 0; } ul, li { color: black; } .activatoror { position: fixed; top: 0; left: 50%; transform: translateX(-50%); display: inline-flex; padding: 3px 5px; color: white; background-color: red; border: solid 1px black; cursor: pointer; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="ul-1"> <li>1st li of first ul</li> <li> <ul class="ul-2"> <li>1st li of 2nd ul</li> <li> <ul class="ul-3"> <li id="idTest">1st li of 3rd ul (#idTest)</li> </ul> </li> <li>3rd li of 2nd ul</li> </ul> </li> </ul> <div class="activatoror">click me</div> </div>

<强>拨弄

https://jsfiddle.net/Hastig/e5vsLwsu/

获取元素的所有父元素而不使用ID

2 个答案: