3

私はjqueryに飛び込んでいるところなので、本当にばかげた間違いを許してください...

データベースから生成しているテーブルがあります。

<table id="DataTable">
    <tr>
        <th><input type="button" onclick=doCheck()></th>
        <th>col 2</th>
        <th>col 3</th>
        <th>col 4</th>
        <th>col 5</th>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
        <td class="thisOne">data 5</td>
    </tr>
 .
 .
 .
  </table>

thisOneボックスがチェックされている行にあるかどうかに基づいて、ラベルの付いたcolumn5に対していくつかの検証チェックを実行する必要があります。これが私がこれまでに持っているものです：

//Get checkboxes
var boxes = $("#DataTable").find("tr td input[type=checkbox]");
var locations = [];
boxes.each(function (index, element) {
        if ($(element).is(':checked')) {
            //Code here
        }
    });

マークされた領域では、//code here多くのことを試しましたが、目的の列を正常に選択できませんでした。私が試したいくつかのこと（注：私はHide()テスト目的で使用しています）：

$(this).closest("td").next('.thisOne').hide(); Doesn't work
$(this).parent("td").next('.thisOne').hide();  Doesn't Work
$(this).closest("td").hide();                  Works as expected
$(this).closest("td").next().hide();           Works as expected
$('.thisOne').hide();                          Works as expected

私がリストした最初の行は機能するべきではありませんか？レベル.closest()までナビゲートします。そのクラスのタグが見つかるまで、どこでDOMをトラバースしますか？なぜこれが機能しないのか本当に興味があるので、答えを説明してください。ありがとうtd.next('thisOne')td

4

4 に答える 4

4

必要なのは.siblings()

$(this).closest('td').siblings('.thisOne').hide();

また、#datatableはテーブルなので、指定する必要はありませんtr td。チェックボックスをオンにするだけです。

var boxes = $("#dataTable :checkbox");

最後checkedに、チェックボックスのプロパティでもあるため、jQueryを介してクエリを実行する必要はありません。を使用できますelement.checked。

全体として

var boxes = $("#dataTable :checkbox");
var locations = [];
boxes.each(function () {
        if ( this.checked ) {
            //Code here
            $(this).closest('td').siblings('.thisOne').hide();
        }
    });
于 2012-12-11T00:25:58.053 に答える
4 
var boxes = $("#DataTable :checkbox");
$.each(boxes, function() {
    if ( $(this).is(':checked') ) {             
        $(this).closest('td').siblings('.thisOne').hide();
    }
});
于 2012-12-11T01:58:44.543 に答える
2

あなたが探している線はこのように見えるはずです-

$(element).closest('tr').find('td.thisOne');

それを分解しましょう、

  1. $(element)-チェックボックス自体。
  2. closest('tr')である最も近い親要素<tr>。
  3. find('td.thisOne')-その親要素内から<td>、thisOneクラスを持つ要素を見つけます。

//Get checkboxes
var boxes = $("#DataTable").find("tr td input[type=checkbox]");
var locations = [];
boxes.each(function (index, element) {
  if ($(element).is(':checked')) {
    var thatOne = $(element).closest('tr').find('td.thisOne');
  }
});
于 2012-12-11T00:27:08.600 に答える
0

あなたの質問に答えるには：

.next()次の兄弟を見つけるだけなので、機能しません。

あなたの場合、あなたは必要です、それはすべての次の兄弟.nextAll()を見つけます、すなわち

$(this).closest("td").nextAll('.thisOne').hide();

詳細な内訳：

$(this)                // This is your checkbox.
.closest("td")         // This gets its closest ancester "td".
.nextAll('.thisOne')   // This finds the closest following sibling that has the class "thisOne".
.hide();

ここで動作するデモ。

于 2012-12-11T00:32:06.027 に答える