Question

我使用for循环追加元素。

df = pd.read_csv('file_1.csv', error_bad_lines=False)

因为我使用for循环来追加0-28的元素;我想按顺序添加字符串中的字母作为for循环中的新数据属性。

注意：阿拉伯字母有28个字母，它是从右到左书写的草书。

for ( i = 0; i < 28; i++ ) {
  var $sound = '<nav class="cell"><a class="pointer blacktxt" data-asound="'+ i +'"><i class="fa fa-volume-up"></i></a></nav>'
  var $csound = '<nav class="cell"><input type="text" class="txtcenter" data-csound="'+ i +'" placeholder="'+ i +'" /></nav>'
  var $newDiv = $('<header class="table lessonSec" data-alphabet="'+ i +'"/>').html($sound + $csound)
  $(".lesson").append( $newDiv )
}

以下是我希望如何动态追加元素的示例。

我已经在这方面工作了好几个小时，我不知道如何继续做这样的事情。

有谁知道如何做到这一点，并可以引导我通过它？

＆＃13;

var char = "ابتثجحخدذرزسشصضطظعغفقكلمنهوي";

＆＃13;

$("body").append('<div class="lesson blacktxt"></div>')

var char = "ابتثجحخدذرزسشصضطظعغفقكلمنهوي";

for ( i = 0; i < 28; i++ ) {
  var $sound = '<a class="pointer" data-asound="'+ i +'"><i class="fa fa-volume-up"></i></a>'
  var $csound = '<input type="text" class="wauto" data-csound="'+ i +'" placeholder="'+ i +'" />'
  var $newDiv = $('<p class="lessonSec" data-alphabet="'+ i +'"/>').html($sound + $csound)
  $(".lesson").append( $newDiv )
}

＆＃13;

body {
  background: #7fb8ff;
}

/* Global Misc Classes */
.pointer {
  cursor: pointer;
  padding: 20%;
}

.wauto {
  width: auto;
  display: inline-block;
}

＆＃13;

Answer 1

尝试创建设置为len的变量char.length - 1，在len循环内递减for，将data-alphabet设置为char[len]

$("body").append('<div class="grid"><div class="grid__col--12 lesson blacktxt"></div></div>');

var char = "ابتثجحخدذرزسشصضطظعغفقكلمنهوي";

for (i = 0, len = char.length - 1; i < 28; i++, len--) {
  var $sound = '<nav class="cell"><a class="pointer blacktxt" data-asound="'+ i +'"><i class="fa fa-volume-up"></i></a></nav>'
  var $csound = '<nav class="cell"><input type="text" class="txtcenter" data-csound="'+ i +'" placeholder="'+ i +'" /></nav>'
  var $newDiv = $('<header class="table lessonSec" data-alphabet="'+ char[len] +'"/>').html($sound + $csound)
  $(".lesson").append( $newDiv )
}

body {
  background: #7fb8ff;
}

/* Center DIVs Vertically and Horizontally */
.table {
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
  margin: 1em 0;
}
.cell {
  display: table-cell;
  vertical-align: middle;
}

/* Global Misc Classes */
.pointer {
  cursor: pointer;
}
.txtcenter {
  text-align: center;
}

<link href="http://treehouse-code-samples.s3.amazonaws.com/poly/css/application.css" rel="stylesheet"/>
<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

请考虑以下代码段：

var chars = "ابتثجحخدذرزسشصضطظعغفقكلمنهوي";


var arrayOfChars = chars.split('').reverse(); // got them in reverse order

var divs = arrayOfChars.map(buildDiv)

$('.mydiv').prepend(divs)


function buildDiv(c) {
  return $('<div />').attr('data-around', c)
}

Answer 3

我注意到你试图在里面添加数据属性 $(".lesson").append( $newDiv )

您需要使用$('.selector').data('your_attribute', 'whatever you want to add');

或

$('.selector').attr('your_attribute', 'whatever you want to add');

如果你不这样做^你将无法向数据属性添加任何内容。基于你的问题，我不确定这是你遇到的问题，但肯定会影响你的结果。

祝你好运！

使用For循环追加。在追加之前添加字符串中的字符以便添加元素

3 个答案: