Question

当天早些时候，我遇到jquery's find方法工作困难。现在我无法从下面的html表中获取嵌套元素：

我想要做的事情：在每个复选框选中的列select上，我想打印兄弟姐妹的值，name和address，但我无法做到。以下是我的代码：

$("#but").click(function(){
        $(".tabclass tr td input[type='checkbox']:checked").each(function(){
            var sibs=$(this).siblings("td");
            var v1=$(sibs[0]).text(); 
            var v2=$(sibs[1]).children[0].val();
            alert(v1+" & "+v2);
        });
});

HTML代码：

    <body>
  <table border="1" class="tabclass">
    <th>select</th>
    <th>Name</th>
    <th>Address</th>
    <tr>
      <td>
        <input type="checkbox" name="selectCheck" class="select" id="ch1" value="1" /> </td>
      <td><span class="name">Nitin</span></td>
      <td>
        <select name="address">
          <option>Gurgaon</option>
          <option>Noida</option>
          <option>Rohini</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="selectCheck" class="select" id="ch2" value="2" /> </td>
      <td><span class="name">Abc</span></td>
      <td>
        <select name="address">
          <option>Gurgaon</option>
          <option>Noida</option>
          <option>Rohini</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="selectCheck" class="select" id="ch3" value="3" /> </td>
      <td><span class="name">Xyz</span></td>
      <td>
        <select name="address">
          <option>Gurgaon</option>
          <option>Noida</option>
          <option>Rohini</option>
        </select>
      </td>
    </tr>
  </table>
  <br>
  <br>
  <button id="but">Test</button>
</body>

Answer 1

代码中有2个问题

在获得兄弟姐妹之前，您需要检查输入的父级。

更改

var sibs=$(this).siblings("td");

到

var sibs=$(this).parent().siblings("td");

.children[0]为您提供了一个DOM对象，该对象没有val()方法。

替换

var v2=$(sibs[1]).children[0].val();

带

var v2 = $('select', sibs[1]).val(); OR  var v2=$(sibs[1]).children()[0].value;

同样使用console.log而不是alert，因为后者会停止运行UI的线程。

<强> JS

$("#but").click(function() {
  $(".tabclass tr td input[type='checkbox']:checked").each(function() {
    var sibs = $(this).parent().siblings("td");
    var v1 = $(sibs[0]).text();
    var v2 = $('select', sibs[1]).val();
    alert(v1 + " & " + v2);
  });
});

<强> Check Fiddle

Answer 2

问题：复选框是否是td的子项，并且它没有任何兄弟姐妹。根据你的代码var sibs=$(this).siblings("td");，它什么都没有。

解决方案：要升级到其父级，即td，现在这个td有兄弟姐妹。所以使用此代码

var sibs=$(this).parent().siblings("td");

同时更改$(sibs[1]).children[0].val();

到

$(sibs[1]).children('select').val();

如何在jquery

2 个答案: