SVG 요소에 대해 jQuery .hasClass() 메서드가 실패합니다.

Question

node 및 link 클래스의 SVG 요소 집합이 있습니다. 내 프로그램은 요소가 node 클래스인지 또는 link 클래스인지를 SVG 요소 중 하나를 가리키면 감지해야합니다. 그러나 어떤 이유로 .hasClass()는 작동하지 않습니다

$(".node").hover(function(evt){ 
    console.log($(this).attr("class")); //returns "node" 
    console.log($(this).hasClass('node')); //returns false 
}, function(){console.log("Done");}); 

그래서 나는에 공중 선회 요소는 클래스 node을 가지고 있으며, console.log($(this).attr("class")); 같이 jQuery를 너무 감지하지만, 어떤 이유로 실제에 대한 .hasClass()이 실패합니다. 왜 이런거야? SVG 때문에 실패합니까?

Answer 1

HTML 요소의 클래스 속성은 SVG에서 동일한 의미를 갖지 않습니다.

$("<b></b>").addClass($(this).attr("class")).hasClass("node") 

또는 SVG 요소에 대한

/(^|\s)node(\s|$)/.test($(this).attr("class")) 

. 구문 오류, 오래된 브라우저를 사용하여, 오래된를 사용하여 :

편집 .hasClass는 http://jsfiddle.net/X6BPX/1/

그래서 문제가 다음의 조합이 될 수있다 (적어도 IE9와 FF에서) 잘 작동하는 것 같다 jQuery 버전.

Answer 2

작동. BERGI 댓글에서 지적하지만 기능

$(".node").hover(function(evt){ 
    console.log($(this).attr("class")); //returns "node" 
    console.log($(this).hasClass('node')); //returns false 
}, function(){console.log("Done");}); 

http://jsfiddle.net/X6BPX/

Answer 3

을 닫아야합니다, jQuery를 자동으로 정상적인 DOMString 대신 SVGAnimatedString 객체를 반환 className의 계정에 SVG 요소에 실패합니다. 비교를 위해서 this JSFiddle을 참조하십시오.

나는이에 끌어 오기 요청을 제출 유혹하지만, 빠른 프로젝트 검색을했고, 분명히 SVG 문제에 대한 jQuery를 프로젝트 자세는 고치지 않을 것 (wontfix)가되었습니다 : https://github.com/jquery/jquery/pull/1511

당신이 D3를 사용하는 경우, 당신은 d3.select(this).classed('node')을 사용할 수 있습니다 . D3은 HTML 요소와 SVG 요소 모두를 올바르게 반환합니다.

Answer 4

이것은 가장 빠른 옵션은 아니지만 가능한 해결책입니다. jQuery의 hasClass을 사용하는 대신 class 속성을 문자열로 가져오고 indexOf을 사용하여 검색 할 수 있습니다. 이것이 실패 할 가능성이있는 사용 사례가있을 수 있으므로 수퍼 단순 프로젝트를 제외하고는 권장하지 않습니다.

근무 예 :

var s = $(this).attr('class'); 
if(s.indexOf('node')!==-1){ 
    // do something 
} 

는 기억 : 그것은 아무것도 찾을 수 없습니다 indexOf 반환 -1하지 0. 하위 문자열이 0 인 인덱스에서 시작될 때 0이 반환됩니다.

Answer 5

이것은 jQuery 3.x.x 이전 버전에 대한 addClass, removeClass, hasClass jquery 메소드에 대한 해킹입니다.

$.fn.extend({ 
    addSVGClass: function (cls) { 
     return this.each(function() { 
      var classList = $(this).attr('class'); 
      if (classList) { 
       var classListArr = classList.split(" "); 
       if (classListArr.indexOf(cls) === -1) { 
        classListArr.push(cls); 
        classList = classListArr.join(" ").trim(); 
        $(this).attr('class', classList); 
       } 
      } else { 
       $(this).attr('class', cls); 
      } 
     }); 
    }, 
    removeSVGClass: function (cls) { 
     return this.each(function() { 
      var classList = $(this).attr('class'); 
      if (classList) { 
       var classListArr = classList.split(" "); 
       if (classListArr.indexOf(cls) !== -1) { 
        delete classListArr[classListArr.indexOf(cls)]; 
        classList = classListArr.join(" ").trim(); 
        $(this).attr('class', classList); 
       } 
      } 

     }); 
    }, 
    hasSVGClass: function (cls) { 
     var el = this[0]; 
     var classList = $(el).attr('class'); 
     if (classList) { 
      var classListArr = classList.split(" "); 
      if (classListArr.indexOf(cls) !== -1) { 
       return true; 

      } else { 
       return false; 
      } 
     } 
     return false; 
    } 
}); 

사용 :

$('.svg-element').addSVGClass('selected');