在另一个元素中定位一个元素答案

【问题标题】：Target an Element within another Element在另一个元素中定位一个元素
【发布时间】：2018-01-17 03:22:16
【问题描述】：

我希望尝试在另一个元素中找到一个元素，然后向它添加一个 ID，因为这是一个多动态分页 Prince 文档，到目前为止，我有下面的代码，但不确定如何检查 title__container-page DIV 在page-first DIV 中，因为有多个page-first 元素，我只想将ID 添加到包含title__container-page 元素的任何page-first 元素中，目前它正在将该ID 添加到全部。

<script>
    var checkedValue = "title__container-page";
    var targetModule = document.getElementsByClassName('page-first');

    var checkedArray = checkedValue.split(" ");             

    console.log(checkedArray);

    checkedArray.forEach(function (val, key) {
        if (val === "") {
            checkedArray.splice(key, 1)
        }
        if (checkedArray.length > 0) {
            targetModule[key].id = "column-padding-top";
        }
    }) 
</script>

【问题讨论】：

问题代码在哪里检查元素？
你的代码没有按照你说的去做。

标签： javascript html css logic

【解决方案1】：

如果你想在另一个元素中定位一个元素，你可以使用queryselector。

var span = document.querySelector("#whatever .something");
span.id = "newId";

console.log(document.getElementById('newId'));

<div id=whatever>
  <span class=something></span>
</div>

如果您想长期这样做，您可以更改getElementsByClassName 的上下文。

var div = document.getElementById("whatever");
var span = div.getElementsByClassName("something")[0];
span.id = "newId";

console.log(document.getElementById('newId'));

<div id=whatever>
  <span class=something></span>
</div>

【讨论】：

【解决方案2】：

这里有 5 个 class='page-first' 的父 div，其中 3 个包含 class='title__container-page' 的子 div：

<div class='page-first'>
    <div class='title__container-page'></div>
</div>

<div class='page-first'>
    <div class='title__container-page'></div>
</div>

<div class='page-first'>

</div>

<div class='page-first'>

</div>

<div class='page-first'>
    <div class='title__container-page'></div>
</div>

检查元素：

下面扫描所有的父 div，并为发现有 class='title__container-page' 的子的父添加一个 ID：

$('.page-first').each(function() {
      this_childs = $(this).children();
      this_childs.each(function() {
            if($(this).attr('class') == 'title__container-page') {
                add_id = 'div_' + Math.floor((Math.random() * 100000) + 1);
                $(this).parent().attr('id', add_id);  // add id to page-first element 
        }
      })
})

检查元素：

这是假设您可以使用 jQuery。

【讨论】：