Schauen Sie sich meinen Geigencode an: http://jsfiddle.net/hassaan39/0kourse6/
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.pin_head {
background: #eee;
}
.pin_head:after {
content: "";
display: block;
clear: both;
height: 0;
}
.pin_head > div {
float: left;
margin-left: -1px;
border-left: 1px solid #ddd;
}
.pin_head > div strong {
font-size: 13px;
padding: 0 10px;
line-height: 50px;
display: block;
}
.pin_head > div.pin_id strong {
line-height: 50px;
padding: 0;
text-align: center;
}
.pin_head > div.pin_id {
margin: 0;
border-left: 0px none;
}
.pin_id {
width: 7%;
border-left: 0px none;
}
.pin_pro {
width: 14%;
}
.pin_date {
width: 7%;
}
.pin_fname {
width: 12%;
}
.pin_lname {
width: 12%;
}
.pin_email {
width: 11%;
}
.pin_phone {
width: 11%;
}
.pin_pass {
width: 20%;
}
.pin_lists ul {
padding: 0;
margin: 0;
}
.pin_lists ul li {
list-style: none;
border-bottom: 1px solid #ddd;
overflow: hidden;
}
.pin_lists ul li:last-child {
border-bottom: 0px none;
}
.pin_lists ul li:nth-child(even) {
background: #fdfbfc;
}
.pin_lists ul li:after {
content: "";
display: block;
clear: both;
height: 0;
}
.pin_lists ul li > div {
float: left;
margin-left: -1px;
border-left: 1px solid #ddd;
padding: 7px 5px;
min-height: 77px;
word-wrap: break-word;
margin-bottom: -99999px;
padding-bottom: 100004px;
}
.pin_delete {
width: 6.7%;
}
.pin_delete a {
display: block;
text-transform: uppercase;
text-align: center;
line-height: 44px;
font-weight: bold;
}
.pin_lists ul li .pin_id {
font-weight: bold;
line-height: 44px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pin_head">
<div class="pin_id"><strong>Order ID</strong>
</div>
<div class="pin_pro"><strong>Product Name</strong>
</div>
<div class="pin_date"><strong>Dated</strong>
</div>
<div class="pin_fname"><strong>First Name</strong>
</div>
<div class="pin_lname"><strong>Last Name</strong>
</div>
<div class="pin_email"><strong>Email</strong>
</div>
<div class="pin_phone"><strong>Phone</strong>
</div>
<div class="pin_pass"><strong>Password</strong>
</div>
</div>
<div class="pin_lists">
<ul>
<li>
<div class="pin_id" data-col="Order ID">654</div>
<div class="pin_pro" data-col="Product Name">Low Voltage</div>
<div class="pin_date" data-col="Dated">2015-08-07</div>
<div class="pin_fname" data-col="First Name">John</div>
<div class="pin_lname" data-col="Last Name">Tait</div>
<div class="pin_email" data-col="Email">johnson@mail.com</div>
<div class="pin_phone" data-col="Phone">123-456-789</div>
<div class="pin_pass" data-col="Password">passcode</div>
<div class="pin_delete" data-col="Change Record"><a href="#">Edit</a>
</div>
</li>
<li>
<div class="pin_id" data-col="Order ID">654</div>
<div class="pin_pro" data-col="Product Name">Low Voltage</div>
<div class="pin_date" data-col="Dated">2015-08-07</div>
<div class="pin_fname" data-col="First Name">John</div>
<div class="pin_lname" data-col="Last Name">Tait</div>
<div class="pin_email" data-col="Email">johnson@mail.com</div>
<div class="pin_phone" data-col="Phone">123-456-789</div>
<div class="pin_pass" data-col="Password">passcode</div>
<div class="pin_delete" data-col="Change Record"><a href="#">Edit</a>
</div>
</li>
</ul>
</div>
Ich möchte Text aus (pin_head> div) in (.pin_lists li) data-col mit der Funktion .each () jQuery hinzufügen. Ich bin hier hart, um die Werte zu codieren.
Bitte helfen Sie mir auf dem guten Weg. :) Ich bin neu in jQuery.
4
Osmani
7 Aug. 2015 im 09:53
4 Antworten
Beste Antwort
Ich nehme an, Sie möchten, dass der Header jeder Spalte das Attribut data-col
für jede Zelle ist.
Sie können so etwas tun:
$(document).ready(function() {
var list = $('.pin_lists li');
$('.pin_head div').each(function(item) {
var _this = this;
list.each(function(element) {
$($(this).children()[item]).attr('data-col', $(_this).find('strong').text())
})
})
})
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.pin_head {
background: #eee;
}
.pin_head:after {
content: "";
display: block;
clear: both;
height: 0;
}
.pin_head > div {
float: left;
margin-left: -1px;
border-left: 1px solid #ddd;
}
.pin_head > div strong {
font-size: 13px;
padding: 0 10px;
line-height: 50px;
display: block;
}
.pin_head > div.pin_id strong {
line-height: 50px;
padding: 0;
text-align: center;
}
.pin_head > div.pin_id {
margin: 0;
border-left: 0px none;
}
.pin_id {
width: 7%;
border-left: 0px none;
}
.pin_pro {
width: 14%;
}
.pin_date {
width: 7%;
}
.pin_fname {
width: 12%;
}
.pin_lname {
width: 12%;
}
.pin_email {
width: 11%;
}
.pin_phone {
width: 11%;
}
.pin_pass {
width: 20%;
}
.pin_lists ul {
padding: 0;
margin: 0;
}
.pin_lists ul li {
list-style: none;
border-bottom: 1px solid #ddd;
overflow: hidden;
}
.pin_lists ul li:last-child {
border-bottom: 0px none;
}
.pin_lists ul li:nth-child(even) {
background: #fdfbfc;
}
.pin_lists ul li:after {
content: "";
display: block;
clear: both;
height: 0;
}
.pin_lists ul li > div {
float: left;
margin-left: -1px;
border-left: 1px solid #ddd;
padding: 7px 5px;
min-height: 77px;
word-wrap: break-word;
margin-bottom: -99999px;
padding-bottom: 100004px;
}
.pin_delete {
width: 6.7%;
}
.pin_delete a {
display: block;
text-transform: uppercase;
text-align: center;
line-height: 44px;
font-weight: bold;
}
.pin_lists ul li .pin_id {
font-weight: bold;
line-height: 44px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pin_head">
<div class="pin_id"><strong>Order ID</strong>
</div>
<div class="pin_pro"><strong>Product Name</strong>
</div>
<div class="pin_date"><strong>Dated</strong>
</div>
<div class="pin_fname"><strong>First Name</strong>
</div>
<div class="pin_lname"><strong>Last Name</strong>
</div>
<div class="pin_email"><strong>Email</strong>
</div>
<div class="pin_phone"><strong>Phone</strong>
</div>
<div class="pin_pass"><strong>Password</strong>
</div>
</div>
<div class="pin_lists">
<ul>
<li>
<div class="pin_id">654</div>
<div class="pin_pro">Low Voltage</div>
<div class="pin_date">2015-08-07</div>
<div class="pin_fname">John</div>
<div class="pin_lname">Tait</div>
<div class="pin_email">johnson@mail.com</div>
<div class="pin_phone">123-456-789</div>
<div class="pin_pass">passcode</div>
<div class="pin_delete"><a href="#">Edit</a>
</div>
</li>
<li>
<div class="pin_id">654</div>
<div class="pin_pro">Low Voltage</div>
<div class="pin_date">2015-08-07</div>
<div class="pin_fname">John</div>
<div class="pin_lname">Tait</div>
<div class="pin_email">johnson@mail.com</div>
<div class="pin_phone">123-456-789</div>
<div class="pin_pass">passcode</div>
<div class="pin_delete"><a href="#">Edit</a>
</div>
</li>
</ul>
</div>
1
Joel Almeida
7 Aug. 2015 im 07:11
In jQuery können Sie Folgendes tun:
$("#yourElement").data("yourKeyName", "yourValue")
Weitere Informationen finden Sie unter dieser Website der Dokumentation
0
bloC
7 Aug. 2015 im 06:57
Verwenden Sie die folgende jQuery, um die data-col
Elemente auf Ihrem li
basierend auf dem Inhalt Ihres pin_head
div dynamisch zu erstellen:
$(".pin_lists div").each(function() {
$(this).attr("data-col", $($(".pin_head").children()[$(this).index()]).find("strong").text());
});
Live-Demo:
$(".pin_lists div").each(function() {
$(this).attr("data-col", $($(".pin_head").children()[$(this).index()]).find("strong").text());
});
* {
margin:0px;
padding:0px;
box-sizing:border-box;
}
.pin_head {
background: #eee;
}
.pin_head:after {
content:"";
display:block;
clear:both;
height:0;
}
.pin_head > div {
float:left;
margin-left:-1px;
border-left: 1px solid #ddd;
}
.pin_head > div strong {
font-size: 13px;
padding:0 10px;
line-height:50px;
display:block;
}
.pin_head > div.pin_id strong {
line-height: 50px;
padding: 0;
text-align: center;
}
.pin_head > div.pin_id {
margin:0;
border-left:0px none;
}
.pin_id {
width:7%;
border-left: 0px none;
}
.pin_pro {
width:14%;
}
.pin_date {
width:7%;
}
.pin_fname {
width:12%;
}
.pin_lname {
width:12%;
}
.pin_email {
width:11%;
}
.pin_phone {
width:11%;
}
.pin_pass {
width:20%;
}
.pin_lists ul {
padding:0;
margin:0;
}
.pin_lists ul li {
list-style:none;
border-bottom: 1px solid #ddd;
overflow:hidden;
}
.pin_lists ul li:last-child {
border-bottom:0px none;
}
.pin_lists ul li:nth-child(even) {
background: #fdfbfc;
}
.pin_lists ul li:after {
content:"";
display:block;
clear:both;
height:0;
}
.pin_lists ul li > div {
float:left;
margin-left:-1px;
border-left: 1px solid #ddd;
padding:7px 5px;
min-height:77px;
word-wrap:break-word;
margin-bottom: -99999px;
padding-bottom: 100004px;
}
.pin_delete {
width:6.7%;
}
.pin_delete a {
display:block;
text-transform:uppercase;
text-align:center;
line-height:44px;
font-weight:bold;
}
.pin_lists ul li .pin_id {
font-weight:bold;
line-height:44px;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pin_head">
<div class="pin_id"><strong>Order ID</strong>
</div>
<div class="pin_pro"><strong>Product Name</strong>
</div>
<div class="pin_date"><strong>Dated</strong>
</div>
<div class="pin_fname"><strong>First Name</strong>
</div>
<div class="pin_lname"><strong>Last Name</strong>
</div>
<div class="pin_email"><strong>Email</strong>
</div>
<div class="pin_phone"><strong>Phone</strong>
</div>
<div class="pin_pass"><strong>Password</strong>
</div>
</div>
<div class="pin_lists">
<ul>
<li>
<div class="pin_id">654</div>
<div class="pin_pro">Low Voltage</div>
<div class="pin_date">2015-08-07</div>
<div class="pin_fname">John</div>
<div class="pin_lname">Tait</div>
<div class="pin_email">johnson@mail.com</div>
<div class="pin_phone">123-456-789</div>
<div class="pin_pass">passcode</div>
<div class="pin_delete"><a href="#">Edit</a>
</div>
</li>
<li>
<div class="pin_id">654</div>
<div class="pin_pro">Low Voltage</div>
<div class="pin_date">2015-08-07</div>
<div class="pin_fname">John</div>
<div class="pin_lname">Tait</div>
<div class="pin_email">johnson@mail.com</div>
<div class="pin_phone">123-456-789</div>
<div class="pin_pass">passcode</div>
<div class="pin_delete"><a href="#">Edit</a>
</div>
</li>
</ul>
</div>
Diese Live-Demo führt zu folgendem Ergebnis:
1
Maximillian Laumeister
7 Aug. 2015 im 07:21
Sie könnten so etwas tun
var array = [];
$('.pin_head > div').each(function(index, obj) {
array[index] = $(this).text();
});
$('li>div').each(function(index, obj) {
var data = $(this).attr("data-col", array[index]);
});
0
Eugen Sunic
28 Sept. 2019 im 12:04