>

이와 비슷한 테이블이 있습니다 :

<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[]' />
                 <span class="check"></span> 
            </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[]' />
                 <span class="check"></span> 
            </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[]' />
                 <span class="check"></span> 
            </td>
        </tr>
    </table>

실제로이 그림과 같습니다 : 표 참조  이제 특정 .check 클래스를 선택하기 위해 jQuery 스크립트를 작성하고 (예 :세 번째 행 세 번째 셀 범위) HTML 메시지를 작성하는 경우 선택자는 무엇입니까? 내가 $('.check').html("Hello World"); 를 사용하는지 아시다시피  그런 다음 Hello World 를 인쇄합니다.  모든 범위에서. 나는 Hello World 를 인쇄해야합니다  특정 범위에서만. 티아.


  • 답변 # 1

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

    이것은 입력 필드 외부 (블러 이벤트)를 클릭하면 행 요소를 가져 와서 .check 를 검색하는 것입니다.  요소. .text 대신 원하는대로 원하는대로 할 수 있습니다.

  • 답변 # 2

    nth-child 를 사용할 수 있습니다  세 번째 행 세 번째 셀 범위를 얻습니다. 아래 코드 참조

    $(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"> <span class="check"></span> </th>
        </tr>
        <tr>
            <td class="troe"> .trow </th>
            <td class="trow"> .trow </th>
            <td class="trow"> <span class="check"></span> </th>
        </tr>
        <tr>
            <td class="troe"> .trow </th>
            <td class="trow"> .trow </th>
            <td class="trow"> <span class="check"></span> </th>
        </tr>
    </table>
    
    

  • 답변 # 3

    :nth-child(2) 를 사용해보십시오

    $(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"> <span class="check"></span> </th>
      </tr>
      <tr>
        <td class="troe"> .trow </th>
          <td class="trow"> .trow </th>
            <td class="trow"> <span class="check"></span> </th>
      </tr>
      <tr>
        <td class="troe"> .trow </th>
          <td class="trow"> .trow </th>
            <td class="trow"> <span class="check"></span> </th>
      </tr>
    </table>
    
    

  • 답변 # 4

    :eq(n) 를 사용할 수 있습니다  (선택기) 또는 .eq(n)  특정 인덱스 기반 요소를 타겟팅하는 (jquery 방법) (둘 다 0 기반) : 예 :

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

    $(".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"> <span class="check"></span> </td>
        </tr>
        <tr>
            <td class="troe"> .trow </td>
            <td class="trow"> .trow </td>
            <td class="trow"> <span class="check"></span> </td>
        </tr>
        <tr>
            <td class="troe"> .trow </td>
            <td class="trow"> .trow </td>
            <td class="trow"> <span class="check"></span> </td>
        </tr>
    </table>
    
    

관련 자료

  • 이전 sql server - t-sql - 문자열에서 구분 기호 사이의 sum 수
  • 다음 javascript - 이벤트 핸들러를 위해 무슨 일이 벌어지고 있습니까? 다른 기능에도 적용됩니까?