.theader </th> <th class="theader"> .theader </th> <th class="theader"> .theader </th> "> .theader </th> <th class="theader"> .theader </th> <th class="theader"> .theader </th> "> .theader </th> <th class="theader"> .theader </th> <th class="theader"> .theader </th> " />

特定クラスのjQueryセレクタ

私はこのようなテーブルを持っています:

 <table>
        <tr>
            <th class="theader"> .theader </th>
            <th class="theader"> .theader </th>
            <th class="theader"> .theader </th>
        </tr>
        <tr>
            <td class="troe"> <input type='text' class='lat' name='lat[]' /> </td>
            <td class="trow"> <input type='text' class='lat' name='long[]' /> </td>
            <td class="trow">
                <input type='text' class='place' name='place[]' />
                  
            </td>
        </tr>
        <tr>
            <td class="troe"> <input type='text' class='lat' name='lat[]' /> </td>
            <td class="trow"> <input type='text' class='lat' name='long[]' /> </td>
            <td class="trow">
                <input type='text' class='place' name='place[]' />
                  
            </td>
        </tr>
        <tr>
            <td class="troe"> <input type='text' class='lat' name='lat[]' /> </td>
            <td class="trow"> <input type='text' class='lat' name='long[]' /> </td>
            <td class="trow">
                <input type='text' class='place' name='place[]' />
                  
            </td>
        </tr>
    </table>

それは実際にこの絵のように見えます: 表を参照してください ここに画像の説明を入力してください  特定の.checkクラス(つまり、 3行3行目のセルスパン)を選択してhtmlメッセージを書き込むjQueryスクリプトを作成するとしたら、セレクタは何になりますか。 私が $( '。check')。html( "Hello World"); を使用しているかどうかはご存知のとおり、すべてのスパンで Hello World が出力されます。 Hello World は特定の期間にのみ印刷する必要があります。 TIA

1
あなたが3番目の行3番目のセルのスパンを選択したいと思うどのイベントについてのようなより精巧な?あなたは最後に何かを試したことがありますか
追加された 著者 Bhushan Kawadkar,
クリックまたはダブルクリックでテーブルフィールドを編集可能にしますか。 jsfiddle.net/u7ofjprw/87 のようなもの
追加された 著者 Bhushan Kawadkar,
@SophiaJoseこの質問の後でさらに支援が必要な場合(具体的には、n番目のセレクタにhtmlを設定することについて)、新しい質問をお願いします - 既存の回答を元の質問と一致させます。
追加された 著者 freedomn-m,
@Sophia上記の私のコメントに従って、元の質問に戻して新しい質問をしてください。
追加された 著者 freedomn-m,
何を試しましたか?
追加された 著者 Dr. Strange,
@BhargavChudasamaを編集しました
追加された 著者 Sophia Jose,
@BhushanKawadkarは、そのテーブルの各セルが入力ボックスであり、blur on()イベントのスパンを選択したいとします。
追加された 著者 Sophia Jose,
実際にこれは私が取り組んでいる実際のプロジェクトを反映しないでしょう、これは単なるケーススタディです。
追加された 著者 Sophia Jose,
@ freedomn-m私は自分のテーブルを編集しました、plsがもう一度見ることができますか?
追加された 著者 Sophia Jose,

4 答え

I suggest you use :eq()

3行目、3セル目、スパンを選択するには、次のようにします。

$( "table tr:eq(3) .check" ).text('CONTENT');

こちらが実用的なものです


あなたのコメントに関して、フィドルのコードをこれに更新しました

$('input').on('blur', function() {
    var t = $(this);
    t.closest('tr').find('.check').text('Hello World');
})

これがすることはあなたが入力フィールドの外側をクリックすると(blurイベント)、それがrow要素となり、 .check 要素を探すことです。 .textの代わりに、いったん選択すると、それを使って好きなことを何でもすることができます。

0
追加された
@SophiaJose上記の回答を更新しました。
追加された 著者 VVV,
これは素晴らしいことですが、その行の任意の入力フィールドに対して blur()イベントで .check クラスを選択する必要があります。その場合はどうやってセレクターを取得できますか? TIA
追加された 著者 Sophia Jose,
どうもありがとう..!!! :)
追加された 著者 Sophia Jose,

あなたは nth-child を利用して3行3列目のセルスパンを得ることができます。下記のコードを参照

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(function(){
  $("table tr:nth-child(4) td:nth-child(3) span.check").html("Changed text");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <th class="theader"> .theader </th>
        <th class="theader"> .theader </th>
        <th class="theader"> .theader </th>
    </tr>
    <tr>
        <td class="troe"> .trow </th>
        <td class="trow"> .trow </th>
        <td class="trow">  </th>
    </tr>
    <tr>
        <td class="troe"> .trow </th>
        <td class="trow"> .trow </th>
        <td class="trow">  </th>
    </tr>
    <tr>
        <td class="troe"> .trow </th>
        <td class="trow"> .trow </th>
        <td class="trow">  </th>
    </tr>
</table>
</div> </div>

0
追加された

:eq(n)(selector)または .eq(n)(jqueryメソッド)(どちらも0ベース)を使用して、特定のインデックスベースの要素をターゲットにすることができます。例えば:

$(".check:eq(2)").text("hello world")
$(".check").eq(2).text("hello world")

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(".check:eq(2)").text("hello world (2)")
$(".check").eq(1).text("hello world (1)")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <th class="theader"> .theader </th>
        <th class="theader"> .theader </th>
        <th class="theader"> .theader </th>
    </tr>
    <tr>
        <td class="troe"> .trow </td>
        <td class="trow"> .trow </td>
        <td class="trow">  </td>
    </tr>
    <tr>
        <td class="troe"> .trow </td>
        <td class="trow"> .trow </td>
        <td class="trow">  </td>
    </tr>
    <tr>
        <td class="troe"> .trow </td>
        <td class="trow"> .trow </td>
        <td class="trow">  </td>
    </tr>
</table>
</div> </div>

0
追加された
これは素晴らしいことですが、その行の任意の入力フィールドに対して blur()イベントで .check クラスを選択する必要があります。その場合はどうやってセレクターを取得できますか? TIA
追加された 著者 Sophia Jose,

try using :nth-child(2)

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(function() {
  $("tr:nth-child(2)").find('.check').html('test');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th class="theader"> .theader </th>
    <th class="theader"> .theader </th>
    <th class="theader"> .theader </th>
  </tr>
  <tr>
    <td class="troe"> .trow </th>
      <td class="trow"> .trow </th>
        <td class="trow">  </th>
  </tr>
  <tr>
    <td class="troe"> .trow </th>
      <td class="trow"> .trow </th>
        <td class="trow">  </th>
  </tr>
  <tr>
    <td class="troe"> .trow </th>
      <td class="trow"> .trow </th>
        <td class="trow">  </th>
  </tr>
</table>
</div> </div>

0
追加された