javascript - jQuery 获取 Sibillings 第一个 child 的名称属性

Question

我有以下 HTML 结构

<form action="todo.php" method="post" name="todo">
  <ul>
    <li>
      <input name="checklist[0]" type="text">
      <ul>
        <li>
          <input name="checklist[0][task][]" type="text">
        </li>
        <li>
          <input name="checklist[0][task][]" type="text">
        </li>
      </ul>
      <a class="add" href="todo.php">Add one</a> </li>
    <li>
      <input name="checklist[1]" type="text">
      <ul>
        <li>
          <input name="checklist[1][task][]" type="text">
        </li>
        <li>
          <input name="checklist[1][task][]" type="text">
        </li>
        <li>
          <input name="checklist[1][task][]" type="text">
        </li>
      </ul>
      <a class="add" href="todo.php">Add one</a> </li>
    <li>
      <input name="checklist[2]" type="text">
      <ul>
      </ul>
      <a class="add" href="todo.php">Add one</a> </li>
  </ul>
  <input name="submit" type="submit" value="Submit">
</form>

jQuery 代码

$( ".add" ).click(function() {

  // Find the Task Count
  var task_count = $(this).siblings('ul').children('li').length;
  var task_name = $(this).siblings('ul').children('li').attr("name");
  var input = '<li><input name="checklist[][task][]" type="text"></li>';

  console.log(task_count);
  console.log(task_name);

  $(this).siblings('ul').append(input);

  return false;
});

当我单击“添加”时，我想获取 Sibilling UL 的第一个 child 的 NAME 属性

在上面的代码中

var task_name = $(this).siblings('ul').children('li').attr("name");

这似乎抛出了未定义

Answer 1

 $(this).siblings('ul').children('li').attr("name")

这将抛出undefined，因为li元素没有任何name属性

你需要这样做:-

  $(this).siblings('ul').children('li').find('input').attr("name")

或

  $(this).siblings('ul').children('li').children('input').attr("name")