[JQUERY] 어떻게 데이터 id 속성을 얻으려면?

어떻게 데이터 id 속성을 얻으려면?

해결법

1. ---

   1.( 링크 를 같은) 속성 데이터-ID의 내용을 얻으려면 사용해야합니다

   ( 링크 를 같은) 속성 데이터-ID의 내용을 얻으려면 사용해야합니다

   $(this).attr("data-id") // will return the string "123"
   

   또는 .DATA () (당신이 새로운 사용하는 경우> = 1.4.3 jQuery를)

   $(this).data("id") // will return the number 123
   

   및 데이터 - 후의 부분 소문자 여야 예컨대 데이터 IDNUM 작업은하지 않습니다 만, 데이터-IDNUM는 것이다.

2. ---

   2.우리가 검색하거나 기존 네이티브 자바 스크립트를 사용하여 이러한 속성을 업데이트하려면 다음과 같이 우리는 getAttribute를과의 setAttribute 방법을 사용하여 수행 할 수 있습니다 :

   우리가 검색하거나 기존 네이티브 자바 스크립트를 사용하여 이러한 속성을 업데이트하려면 다음과 같이 우리는 getAttribute를과의 setAttribute 방법을 사용하여 수행 할 수 있습니다 :

   자바 스크립트를 통해

   <div id='strawberry-plant' data-fruit='12'></div>
   
   <script>
   // 'Getting' data-attributes using getAttribute
   var plant = document.getElementById('strawberry-plant');
   var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'
   
   // 'Setting' data-attributes using setAttribute
   plant.setAttribute('data-fruit','7'); // Pesky birds
   </script>
   

   jQuery를 통해

   // Fetching data
   var fruitCount = $(this).data('fruit');
   OR 
   // If you updated the value, you will need to use below code to fetch new value 
   // otherwise above gives the old value which is intially set.
   // And also above does not work in ***Firefox***, so use below code to fetch value
   var fruitCount = $(this).attr('data-fruit');
   
   // Assigning data
   $(this).attr('data-fruit','7');
   

   이 문서를 읽기

3. ---

   3.중요 사항. 자바 스크립트를 통해 동적 데이터 - 속성을 조정하면이 데이터 () jQuery를 기능에 반영되지 않습니다 것을 명심하십시오. 당신은 데이터 () 함수를 통해뿐만 아니라 그것을 조정해야합니다.

   중요 사항. 자바 스크립트를 통해 동적 데이터 - 속성을 조정하면이 데이터 () jQuery를 기능에 반영되지 않습니다 것을 명심하십시오. 당신은 데이터 () 함수를 통해뿐만 아니라 그것을 조정해야합니다.

   <a data-id="123">link</a>
   

   JS :

   $(this).data("id") // returns 123
   $(this).attr("data-id", "321"); //change the attribute
   $(this).data("id") // STILL returns 123!!!
   $(this).data("id", "321")
   $(this).data("id") // NOW we have 321
   

4. ---

   4.당신은 오래된 IE 브라우저에 대해 우려하지 않는 경우, 당신은 또한 HTML5 데이터 세트 API 사용할 수 있습니다

   당신은 오래된 IE 브라우저에 대해 우려하지 않는 경우, 당신은 또한 HTML5 데이터 세트 API 사용할 수 있습니다

   HTML

   <div id="my-div" data-info="some info here" data-other-info="more info here">My Awesome Div</div>
   

   JS

   var myDiv = document.querySelector('#my-div');
   
   myDiv.dataset.info // "some info here"
   myDiv.dataset.otherInfo // "more info here"
   

   데모 : http://html5demos.com/dataset

   전체 브라우저 지원 목록 : http://caniuse.com/#feat=dataset

5. ---

   5.언급 아무도 놀라지 않는다 :

   언급 아무도 놀라지 않는다 :

   <select id="selectVehicle">
        <option value="1" data-year="2011">Mazda</option>
        <option value="2" data-year="2015">Honda</option>
        <option value="3" data-year="2008">Mercedes</option>
        <option value="4" data-year="2005">Toyota</option>
       </select>
   
   $("#selectVehicle").change(function () {
        alert($(this).find(':selected').data("year"));
   });
   

   다음은 작업의 예는 다음과 같습니다 https://jsfiddle.net/ed5axgvk/1/

6. ---

   6.HTML

   HTML

   <span id="spanTest" data-value="50">test</span>
   

   JS

   $(this).data().value;
   

   또는

   $("span#spanTest").data().value;
   

   나를 위해 작품!

7. ---

   7.나는 $ .DATA를 사용 - http://api.jquery.com/jquery.data/

   나는 $ .DATA를 사용 - http://api.jquery.com/jquery.data/

   //Set value 7 to data-id 
   $.data(this, 'id', 7);
   
   //Get value from data-id
   alert( $(this).data("id") ); // => outputs 7
   

8. ---

   8.

   var id = $(this).dataset.id
   

   나를 위해 작동!

9. ---

   9.자신의 ID로 데이터 속성에 액세스하는 것은 나를 위해 쉬운 비트입니다.

   자신의 ID로 데이터 속성에 액세스하는 것은 나를 위해 쉬운 비트입니다.

   $ ( "# 아이디") 데이터 ( "속성.");

   myFunction 함수 () { 경고 ($ ( "# 단추 1") 데이터 ( "샘플-ID").); } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <버튼형 = "버튼"ID = "Button1에"데이터 샘플 ID = "잡았다!" 의 onclick = "하여 myFunction ()"> Clickhere

10. ---

    10.이 코드 조각은 데이터의 값이 예를 들어 속성을 반환합니다 데이터 ID, 데이터 시간, 데이터 이름 등을, 나는 id 인 보여 주었다

    이 코드 조각은 데이터의 값이 예를 들어 속성을 반환합니다 데이터 ID, 데이터 시간, 데이터 이름 등을, 나는 id 인 보여 주었다

    <a href="#" id="click-demo" data-id="a1">Click</a>
    

    JS :

    $(this).data("id");
    

    // 데이터-ID의 값을 얻을 -> A1

    $(this).data("id", "a2");
    

    //이 데이터-ID를 변경합니다 -> A2

    $(this).data("id");
    

    // 데이터-ID의 값을 얻을 -> A2

11. ---

    11.jQuery를 사용하여 :

    jQuery를 사용하여 :

      $( ".myClass" ).load(function() {
        var myId = $(this).data("id");
        $('.myClass').attr('id', myId);
      });
    

12. ---

    12.동적으로 제거하고 도구 설명을 다시 활성화하고자하는 사람들을 위해, 당신은 처분을 사용하고 방법을 사용할 수 있습니다. https://getbootstrap.com/docs/4.0/components/tooltips/#tooltipdispose 참조

    동적으로 제거하고 도구 설명을 다시 활성화하고자하는 사람들을 위해, 당신은 처분을 사용하고 방법을 사용할 수 있습니다. https://getbootstrap.com/docs/4.0/components/tooltips/#tooltipdispose 참조

13. ---

    13.나는 범위를 가지고있다. I 정의 사용되는 속성 데이터 TXT-랭의 값을 취하려는.

    나는 범위를 가지고있다. I 정의 사용되는 속성 데이터 TXT-랭의 값을 취하려는.

    $(document).ready(function ()
    {
    <span class="txt-lang-btn" data-txt-lang="en">EN</span>
    alert($('.txt-lang-btn').attr('data-txt-lang'));
    });
    

14. ---

    14.시험

    시험

    this.dataset.id
    

    $ ( "# 목록 리"). (함수를 '클릭'에 () { 경고 (this.dataset.id); }); <스크립트 SRC = "https://code.jquery.com/jquery-3.3.1.slim.min.js">

    <리 데이터-ID는 "ID-40"클래스 = "승리"> 를

    • ---

      15.문제는 당신이 옵션 또는 드롭 다운 또는 목록의 선택 옵션을 지정하지되며, 여기에 드롭 다운을 위해, 내가 데이터 속성의 데이터 기록을 가정하고 예입니다.

      문제는 당신이 옵션 또는 드롭 다운 또는 목록의 선택 옵션을 지정하지되며, 여기에 드롭 다운을 위해, 내가 데이터 속성의 데이터 기록을 가정하고 예입니다.

      $('#select').on('change', function(){
              let element = $("#visiabletoID");
              element.val($(this).find(':selected').data('record'));
          });
      

    from https://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute by cc-by-sa and MIT license