繁体   English   中英

在一组匹配元素上将父元素添加到父级,并使用Parent Div href - Javascript

[英]Add Child Element to Parent on a Set of Matched Elements, and use Parent Div href - Javascript

我有一种情况,我需要将一个子div附加到一组元素。 子元素是一个div,它具有一个从其父元素获取href的锚链接。

当我最初只使用一个div时,这一切都很简单,但是现在我正试图让它在一组具有CSS类选择器的元素上工作我似乎只是绕着圆圈转而且它正在变得越来越很沮丧:(

这是一个codepen链接: https ://codepen.io/emilychews/pen/XgrqWZ

这是它应该看起来的第二个codepen(这个例子只有一个父元素): https ://codepen.io/emilychews/pen/RgbawK

我刚刚遇到的另一个问题是,当有许多实例使用同一个类时,我如何拥有它以便每个子元素始终采用来自父元素的href?

任何帮助都会很棒。 艾米丽。

HTML

<div class="outerbox">
  <a href="https://www.google.co.uk">Here is a job Title</a>
</div>

<div class="outerbox">
  <a href="https://www.bbc.co.uk">Here is a job Title</a>
</div>

CSS

* {font-family: arial; color: white;}

body {display: flex; justify-content: space-around;}

.outerbox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 200px;
  background: red;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
}

.outerbox a {margin-right: auto; margin-bottom: auto;}

.innerbox {
  background: blue;
  position: absolute;
  padding: 15px 30px;
}

.innerbox a {  text-decoration: none;}

JS

// DECLARE OUTERBOX
var outerbox = document.querySelectorAll('.outerbox');

// GET PARENT ELEMENT HREF ATTRIBUTE
var parentLink = document.querySelectorAll('.outerbox a');

for (var i = 0; i < parentLink.length; i+=1) {
  var innerHREF = parentLink[i].getAttribute("href");
}

// CREATE INNERBOX
var innerBox = document.createElement('div');
innerBox.classList = "innerbox";

// CREATE ANCHOR LINK AND PASS IN HREF VAR
var anchorTag = document.createElement('a');
anchorTag.setAttribute("href", innerHREF); // pass in innerHREF var
anchorTag.appendChild(innerHREF);
anchorTag.innerHTML = "Apply";

for (var j = 0; j = innerbox.length; j+=1) {
  innerbox[j].appendChild(anchorTag) 
}

// ADD INNERBOX TO OUTERBOX

outerbox.appendChild(innerBox);

你的javascript有一些错误,试试这个

        <script>
          document.querySelectorAll('.outerbox').forEach(function(element){
            //get parent link
            //var innerHREF=element.querySelector('a').href;
            //you need no var, i put it direct on line marked with //*****
            //create innerBox
            var innerBox = document.createElement('div');
            innerBox.classList.add('innerbox');
            // CREATE ANCHOR LINK AND PASS IN HREF VAR
            var anchorTag = document.createElement('a');
            anchorTag.setAttribute("href", element.querySelector('a').href); //***
            anchorTag.innerHTML = "Apply";
            innerBox.appendChild(anchorTag);
            element.appendChild(innerBox);
        });
  </script>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM