如何在jquery中获取嵌套元素

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);
  });
});

检查小提琴

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 个解决方案

解决方案1
2 已采纳 2016-12-10 01:29:31

解决方案2
1 2016-12-10 01:33:37

如何在jquery中获取嵌套元素

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-12-10 01:29:31

解决方案2 1 2016-12-10 01:33:37

解决方案1
2 已采纳 2016-12-10 01:29:31

解决方案2
1 2016-12-10 01:33:37