>

다음과 같은 태그가 있습니다 :

<a href="#" id="ssd" data-toggle="popover" data-info1="demo text: 1" data-info2="demo text: 2" data-info3="demo text3">Link</a>

이 링크를 클릭하면 다음과 같은 기능이 있습니다

$('#ssd').click(function (event) {
    var customData;
    // Code to get all the custom data in format like data-info*
});

참고 : 속성과 같은 data-info *는 임의의 숫자 일 수 있습니다. 즉, data-info1이라는 이름 중 하나 또는 data-info1, data-info2, data-info3이라는 이름 중 하나를 볼 수 있습니다.

어떻게하면 JQuery 선택기를 찾았습니다. 여기에서 변형이 이름에 있기 때문에 Selector로 시작하는 속성 [name ^ = "value"]과 같은 것이 작동하지 않습니다 ...

내가 console.log($('#ssd').data()); 경우  필요없는 추가 속성을 가진 객체를 얻습니다. toggle: "popover", bs.popover: Popover

어떤 제안?

이것은 내가 한 일입니다 :

dataFullList = $(this).data();
$.each(dataFullList, function (index, value) {
    if (index !== "toggle" && index !== "bs.popover") {
        item.name = value.split(":")[0];
        item.number = value.split(":")[1];
        dataIWant.push(item);
    }
});

그래서 나는 dataIWant 를 얻을 것이다  내가 필요없는 물건없이 배열하십시오.

  • 답변 # 1

    data-* 에있는 모든 요소를 ​​대상으로  로 시작 맞춤 jQuery 선택기 selector:dataStartsWith()

    다음은 다음을 수행하는 데 도움이되는 사용자 정의 jQuery 선택기입니다.

    와이즈 비즈 와이즈 비즈  prefix,target다음 요소 :

         

    Given thedata-
      와이즈 비즈   

         

    그러나아니요:

         

    foo-bar
      와이즈 비즈   

    data-foo-bar
    
    

    data-foo-bar-baz
    
    

    커스텀 jQuery 메소드 data-foo-someting

    data-something
    
    

    jQuery.extend(jQuery.expr[':'], { 
      "dataStartsWith" : function(el, i, p, n) {  
        var pCamel = p[3].replace(/-([a-z])/ig, function(m,$1) { return $1.toUpperCase(); });
        return Object.keys(el.dataset).some(function(i, v){
          return i.indexOf(pCamel) > -1;
        });
      }
    });
    
    // Use like:
    $('p:dataStartsWith(foo-bar)').css({color:"red"});  
    // To get a list of data attributes:
    $('p:dataStartsWith(foo-bar)').each(function(i, el){
      console.log( el.dataset );
    });
    
    

  • 답변 # 2

    이 함수는 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p data-foo-bar="a">I have data-foo-bar</p> <p data-foo-bar-baz="b" data-extra="bbb">I have data-foo-bar-baz</p> <p data-bar="a">I have data-bar DON'T SELECT ME</p> <p data-something="b">I have data-something DON'T SELECT ME</p> 를 얻습니다.  속성을 지정하고 배열에 넣습니다 :

    $().dataStartsWith()
    
    

  • 답변 # 3

    데이터를 반복하는 동안 유효하지 않은 키를 격리하기위한 if 조건이 있습니다. 필터로 사용하면 다음과 같이 원하지 않는 키를 삭제하도록 선택할 수 있습니다.

    $.fn.dataStartsWith = function(p) {
      var pCamel = p.replace(/-([a-z])/ig, function(m,$1) { return $1.toUpperCase(); });
      return this.filter(function(i, el){
        return Object.keys(el.dataset).some(function(v){
          return v.indexOf(pCamel) > -1;
        });
      });
    };
    
    $('p').dataStartsWith("foo-bar").css({color:"red"}); 
    
    

    또는 원하는 조건 만 포함하도록 if 조건을 무시하십시오.

  • 답변 # 4

    접두사 데이터를 사용할 수 있습니다. jQuery 플러그인입니다. 일치하는 요소 세트의 첫 번째 요소에 대해 접 두부 데이터 저장소의 값을 리턴하십시오. 반환 된 값은 속성 값과 속성 이름 구조를 기반으로하는 객체 일 수 있습니다.

    사용법

    멀티 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p data-foo-bar="a">I have data-foo-bar</p> <p data-foo-bar-baz="b" data-extra="bbb">I have data-foo-bar-baz</p> <p data-bar="a">I have data-bar DON'T SELECT ME</p> <p data-something="b">I have data-something DON'T SELECT ME</p> 로 HTML 태그를 가져 가라  접두사가 동일한 속성 이 예에서는 myprefix 접두사에 중점을 둡니다.

    data-info
    
    

    data-myprefix 및 모든 function getDataInfo($element, i, a) { var index = i || 1, array = a || [], info = $element.data('info' + index); if(info === undefined) { return array; } array['info' + index] = info; return getDataInfo($element, index + 1, array); } $(function() { console.log(getDataInfo($('#ssd'))); }); 에서 데이터를 읽으려면   $('#ssd').click(function(e){ var data = $(this).data(); for(var key in data) { //here is a condition to use only those data-info items if(data.hasOwnProperty(key) && key.indexOf('info') === -1) { console.log(key); //just to see which key it is delete data[key]; //if you need to build a collection of only data-info keys } } }); 를 사용할 수있는 속성  주어진 접두사로.

    data-*
    
    

    이전 예제는 객체를 반환합니다 :

    <div id="example-tag"
         data-myprefix='{"property1": "value1", "property2": {"property21": "value21"}, "property3": "value2"}'
         data-myprefix-property2='{"property22": "value22"}'
         data-myprefix-property2-property23="value23"
         data-myprefix-property3="overwite-value3"
         data-myprefix-property4='{"property41": "value41"}'
         data-other="We do not read it"></div>
    
    

    data-myprefix-*

관련 자료

  • 이전 python - 문자열 형식을 사용하여 숫자를 형식화하지만 값을 변경하지 마십시오
  • 다음 vba - 하위 폴더 Excel 파일에서 비 연속 셀 (A1, B5, C6)의 데이터를 복사하고 상위 폴더에있는 마스터 파일에 붙여 넣기