Question

我的表格包含<td>个data-label属性。使用jQuery我想填充子input标记placeholder标记。

HTML ：

<table>
    <tr>
        <td data-label="Some placeholder text goes here"><input type="text"></td>
    </tr>
    <tr>
        <td data-label="Some placeholder text goes here"><input type="text"></td>
    </tr>
    <tr>
        <td data-label="Some placeholder text goes here"><input type="text"></td>
    </tr>
</table>

JS ：

$('td[data-label]').children('input').attr('placeholder', $(this).data('label'));

使用上面的代码，占位符没有设置，有人可以告诉我我在这里做错了吗？

Answer 1

我认为this并未提及您的期望。

试试这个：

$('td[data-label]').each(function() {
  $(this).children('input').attr('placeholder', $(this).data('label'))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td data-label="Some placeholder text goes here"><input type="text"></td>
    </tr>
    <tr>
        <td data-label="Some placeholder text goes here"><input type="text"></td>
    </tr>
    <tr>
        <td data-label="Some placeholder text goes here"><input type="text"></td>
    </tr>
</table>

Answer 2

您需要.data()中的td，因为您的输入没有data-label attr。因此，您可以使用.closest('td')来引用td's数据

$('td[data-label] input').attr('placeholder',function(){
  return $(this).closest('td').data('label');
});

检查以下代码段

＆＃13;

$('td[data-label] input').attr('placeholder', function() {
  return $(this).closest('td').data('label');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td data-label="Some placeholder text goes here">
      <input type="text">
    </td>
  </tr>
  <tr>
    <td data-label="Some placeholder text goes here">
      <input type="text">
    </td>
  </tr>
  <tr>
    <td data-label="Some placeholder text goes here">
      <input type="text">
    </td>
  </tr>
</table>

＆＃13;

Answer 3

$('td[data-label]').each(function(td){
    $td = $(td);
    label = $td.data('label');

    $td.find('input').prop('placeholder', label);
}

Answer 4

您在循环中的输入中，但您想在父数据标签属性上设置占位符的值。您还希望使用函数在回调中返回值：

$('td[data-label]').children('input').attr('placeholder', function() {
  return $(this).parent().data('label')
});

<强> jsFiddle example

Answer 5

searchView

使用jQuery填充子属性

5 个答案: