放置DOM元素

Question

我下面的代码可以使用我的multidimensional array创建DOM Element，现在我正在尝试在数组中显示["age"]。但是我不确定如何操纵它，使其看起来像下面的图像。我知道如何创建DOM元素来显示年龄，但是我不知道如何像下面的图像一样显示它。任何帮助将不胜感激。

var personArr = [];
var person = {["first-Name"]: "John", ["last-Name"]: "Doe", ["age"]: 21, ["hobbies"]:["football","swimming","dancing"], ["gender"]:"Male",
  ["person-desc"]: "<br />Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky <br />boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person2 = {
  ["first-Name"]: "Paul",
  ["last-Name"]: "Logan",
  ["age"]: 22,
  ["hobbies"]:["camping","sleeping","eating"],
  ["gender"]:"Male",
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
};
var person3 = {
  ["first-Name"]: "Sean",
  ["last-Name"]: "Kim",
  ["age"]: 32,
  ["hobbies"]:["running","jogging","climbing"],
  ["gender"]:"Male",
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person4 = {
  ["first-Name"]: "Ken",
  ["last-Name"]: "Chow",
  ["age"]: 12,
  ["hobbies"]:["gyming","movies","tv"],
  ["gender"]:"Male",
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};

personArr.push(person, person2, person3, person4);
console.log(personArr);

var parent = document.getElementsByClassName('line1')[0];
        var frag = document.createDocumentFragment();

        personArr.forEach((person, i) => {
            var name = document.createElement('h4');
            var gender = document.createElement('h4');
            var desc = document.createElement('p');
            var hobb = document.createElement('div');
            var age = document.createElement('age');
            var show = document.createElement('div');

            var hobbies = '';
                $.each(person['hobbies'], function (index) {
                  hobbies += ('<div>' + person['hobbies'][index] + '</div>');
                });
            hobb.className = "hide";
            age.className ="square";
            hobb.innerHTML = hobbies;
            age.innerHTML = `${person['age']} Age`;
            name.textContent = `Name : ${person['first-Name']} ${person['last-Name']}`;
            desc.textContent = `${person['person-desc']}`;
            show.innerHTML =`<a href="#">Show more</a>`;
            gender.innerHTML =  `${person['gender']}`;
            frag.appendChild(name);
            frag.appendChild(gender);
            frag.appendChild(age);
            frag.appendChild(desc);
            frag.appendChild(hobb);
            frag.appendChild(show);

        });
        parent.appendChild(frag);

//<---------------------------------------------- TAB FUNCTION ------------------------------------------------------->
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();

$(document).ready(function() {
	$('.hide').hide();

   $("a").click(function() {
      $('.hide').toggle();

   });

});

body {font-family: Arial;}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
.line1{
display:inline-block;
}
.size{
width:50%;
}
a.morelink {
	text-decoration:none;
	outline: none;
}
.morecontent span {
	display: none;

}
h4{
  margin:0;
}
.square{
    width: 50px;
    height: 45px;
    font-size: 18px;
    color: #81C784;
    text-align: center;
    background: transparent;
    display: inline-block;
    border: 1px solid #81C784;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
<div class ="size">
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'People')" id="defaultOpen">People</button>
</div>

<div id="People" class="tabcontent">
<div class="line1"> 

 </div>
 </div>
</div>

</body>
</html>

Answer 1

也许给正方形position: absolute。但是，要执行此操作，您需要编辑javascript以插入一些分隔的父div，您可以为其赋予position: relative。参见摘要。

var personArr = [];
var person = {["first-Name"]: "John", ["last-Name"]: "Doe", ["age"]: 21, ["hobbies"]:["football","swimming","dancing"], ["gender"]:"Male",
  ["person-desc"]: "<br />Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky <br />boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person2 = {
  ["first-Name"]: "Paul",
  ["last-Name"]: "Logan",
  ["age"]: 22,
  ["hobbies"]:["camping","sleeping","eating"],
  ["gender"]:"Male",
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
};
var person3 = {
  ["first-Name"]: "Sean",
  ["last-Name"]: "Kim",
  ["age"]: 32,
  ["hobbies"]:["running","jogging","climbing"],
  ["gender"]:"Male",
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person4 = {
  ["first-Name"]: "Ken",
  ["last-Name"]: "Chow",
  ["age"]: 12,
  ["hobbies"]:["gyming","movies","tv"],
  ["gender"]:"Male",
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};

personArr.push(person, person2, person3, person4);
console.log(personArr);

var parent = document.getElementsByClassName('line1')[0];
        var frag = document.createDocumentFragment();

        personArr.forEach((person, i) => {
            //Create a parent div and append things to this instead of frag.
            var parent = document.createElement('div');
            var name = document.createElement('h4');
            var gender = document.createElement('h4');
            var desc = document.createElement('p');
            var hobb = document.createElement('div');
            var age = document.createElement('age');
            var show = document.createElement('div');

            var hobbies = '';
                $.each(person['hobbies'], function (index) {
                  hobbies += ('<div>' + person['hobbies'][index] + '</div>');
                });
                //give parent a class of parent
            parent.className = "parent";
            hobb.className = "hide";
            age.className ="square";
            hobb.innerHTML = hobbies;
            age.innerHTML = `${person['age']} Age`;
            name.textContent = `Name : ${person['first-Name']} ${person['last-Name']}`;
            desc.textContent = `${person['person-desc']}`;
            show.innerHTML =`<a href="#">Show more</a>`;
            gender.innerHTML =  `${person['gender']}`;
            
            //append parent to frag
            frag.appendChild(parent);
            
            //append children to parent
            parent.appendChild(name);
            parent.appendChild(gender);
            parent.appendChild(age);
            parent.appendChild(desc);
            parent.appendChild(hobb);
            parent.appendChild(show);

        });
        parent.appendChild(frag);

//<---------------------------------------------- TAB FUNCTION ------------------------------------------------------->
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();

$(document).ready(function() {
	$('.hide').hide();

   $("a").click(function() {
      $('.hide').toggle();

   });

});

body {font-family: Arial;}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
.line1{
display:inline-block;
}
.size{
width:50%;
}
a.morelink {
	text-decoration:none;
	outline: none;
}
.morecontent span {
	display: none;

}
h4{
  margin:0;
}
.square{
    width: 50px;
    height: 45px;
    font-size: 18px;
    color: #81C784;
    text-align: center;
    background: transparent;
    display: inline-block;
    border: 1px solid #81C784;
}

/*Make parent div position relative and square position absolute*/
.parent{
    position: relative;
}
.square{
    position: absolute;
    top: 0;
    left: 150px;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
<div class ="size">
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'People')" id="defaultOpen">People</button>
</div>

<div id="People" class="tabcontent">
<div class="line1"> 

 </div>
 </div>
</div>

</body>
</html>