获取点击元素父节点的数组号答案

【问题标题】：Get the array number of a clicked elements parent node获取点击元素父节点的数组号
【发布时间】：2014-11-25 19:03:43
【问题描述】：

我需要能够单击按钮并返回其父数组编号，以便我可以将样式仅应用于具有相同类名的众多 div 中的一个，如果可能的话，我想在 vanilla javascript 中执行此操作.

    <div class="contentBox">
            <button onclick="expand()" class="contentBoxButton"> + </button>
            <title>Lorem Ipsum Here</title>
            <p> 
                Lorem Ipsum HereLorem Ipsum HereLorem Ipsum HereLorem Ipsum HereLorem Ipsum 
            </p>
        </div>
       <script>
         function expand(){
            var button = document.getElementsByClassName('contentBoxButton');
            var parent = button.parentNode;
            parent.style.height = '200px';

        }
       </script>

【问题讨论】：

如果只想获取父元素的引用，可以使用<button>元素的.parentNode property。不确定这与数组有什么关系...
@felix Kling 从我所理解的类中被认为是 javascript 中的数组，所以如果我在应用样式时获得 parentNode，它将适用于具有该类名的所有 div，我只想将样式应用于按下按钮的父级，只有一个 div。
您标记了数组并提到了数组，但您的代码中没有它。你'想在 vanilla js 中做到这一点'，但这里没有 javascript。你在 js 中尝试过什么？
.parentNode 返回单个 DOM 节点。一个节点只能有一个父节点。元素具有哪些类并不重要。更改单个节点的样式不会影响具有相同类的其他节点。试试看！
如果我有超过 50 个与这个几乎相同的 div，我将如何让按钮的 parentNode 被点击？

标签： javascript html arrays dom

【解决方案1】：

感谢 Felix Kling 对.parentNode的评论

您没有获得单个元素的原因是因为您从按其类访问单击的按钮开始..
var button = document.getElementsByClassName('contentBoxButton');
..这确实会为您提供该类所有元素的 节点列表。
因此，在这之后的行中对 parentNode 的调用要么不起作用，要么结果是所有父母的另一个列表..

这是你需要做的：

小提琴：http://jsfiddle.net/13pkrabq/3/

HTML

<div class="contentBox">
    <button onclick="expand(this)"> + </button>
    <p>
        Text Text Text 
    </p>
</div>

function expand(btn) {
    btn.parentNode.style.height = "200px";
}

CSS

.contentBox {
    background-color:#777777;
}

（我添加了 CSS 以使 contextBox 可见）

【讨论】：

@Plentybinary - 刚刚看到你对你的问题的最后评论.. 直接引用parentNode 而不先将其存储到变量中确实更好。所以在我的回答中，像这样：btn.parentNode.style.height = "200px";。（已经更新了我的答案）

【解决方案2】：

如果它是您要扩展的 div，请考虑将侦听器放在上面，这样您就不必去找了。使用 this 传递对 div 的引用，然后使用按钮值打开或关闭 div。

同时在“+”和“-”之间切换按钮的值，并使用类来应用 CSS：

<div onclick="expand(this)">
  <input type="button" value="+" class="expandContentButton">
  <span class="title">Foo bar</span>
  <p class="contentPara">here is the content</p>
</div>

<script>
  function expand(el) {
    var cb = el.querySelectorAll('.expandContentButton')[0];
    if (cb == event.target || cb == event.srcElement) {
      el.className = cb.value == '+' ? 'open' : 'closed';
      cb.value = cb.value == '+' ? '-' : '+';
    }
  }
</script>

还有一些 CSS：

<style type="text/css">
  .title {
    font-weight: bold;
    font-size: 150%;
  }
  .open {}

  .closed {
    height: 30px;
    overflow: hidden;
  }

  .expandContentButton {
    text-align: middle;
    width: 3em;
  }
</style>

【讨论】：