首页 文章

使用jQuery获取类名

提问于
浏览
542

我想用jQuery获取类名

如果它有id

<div class="myclass"></div>

14 回答

  • 976

    如果我们有单个或我们想要第一个 div 元素我们可以使用

    $('div')[0].className 否则我们需要该元素的 id

  • 209

    小心,也许,你有一个类和一个子类 .

    <div id='id' class='myclass mysubclass' >dfdfdfsdfds</div>
    

    如果您使用以前的解决方案,您将拥有:

    myclass mysubclass
    

    因此,如果您想拥有 class selector ,请执行以下操作:

    var className = '.'+$('#id').attr('class').split(' ').join('.')
    

    你会的

    .myclass.mysubclass
    

    现在,如果要选择具有相同类的所有元素,例如上面的div:

    var brothers=$('.'+$('#id').attr('class').split(' ').join('.'))
    

    这意味着

    var brothers=$('.myclass.mysubclass')
    

    更新2018年

    OR可以用2行中的vanilla javascript实现:

    const { classList } = document.querySelector('#id');
      document.querySelectorAll(`.${Array.from(classList).join('.')}`);
    
  • 6

    如果您要使用split函数来提取类名,那么您将不得不补偿可能产生意外结果的潜在格式变化 . 例如:

    " myclass1  myclass2 ".split(' ').join(".")
    

    产生

    ".myclass1..myclass2."
    

    我认为你最好使用正则表达式来匹配类名允许的字符集 . 例如:

    " myclass1  myclass2  ".match(/[\d\w-_]+/g);
    

    产生

    ["myclass1", "myclass2"]
    

    正则表达式可能不完整,但希望您理解我的观点 . 这种方法减少了格式不良的可能性 .

  • 5

    为了完成Whitestock答案(这是我发现的最好的答案)我做了:

    className = $(this).attr('class').match(/[\d\w-_]+/g);
    className = '.' + className.join(' .');
    

    所以对于 " myclass1 myclass2 " ,结果将是 '.myclass1 .myclass2'

  • 26

    如果您不知道 class 名称,但您知道该ID,您可以尝试:

    <div id="currentST" class="myclass"></div>
    

    然后使用:

    alert($('#currentST').attr('class'));
    
  • 1

    如果要检查元素是否具有特定的 class ,最好使用 .hasClass() . 这是因为当一个元素有多个 class 时,检查它并不容易 .

    Example:

    <div id='test' class='main divhover'></div>
    

    Where:

    $('#test').attr('class');        // returns `main divhover`.
    

    使用 .hasClass() ,我们可以测试 div 是否具有类 divhover .

    $('#test').hasClass('divhover'); // returns true
    $('#test').hasClass('main');     // returns true
    
  • 6

    如果您的 <div>id

    ​<div id="test" class="my-custom-class"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
    

    ...你可以试试:

    var yourClass = $("#test").prop("class");
    

    如果您的 <div> 只有 class ,您可以尝试:

    var yourClass = $(".my-custom-class").prop("class");
    
  • 2

    你可以简单地使用,

    var className = $('#id').attr('class');

  • 9

    您可以通过两种方式获取类名:

    var className = $('.myclass').attr('class');
    

    要么

    var className = $('.myclass').prop('class');
    
  • 0

    如果你想获得div的类,然后想检查是否存在任何类,那么简单使用 .

    if ( $('#div-id' ).hasClass( 'classname' ) ) {
        // do something...
    }
    

    例如;

    if ( $('body').hasClass( 'home' ) ) {
        $('#menu-item-4').addClass('active');
    }
    
  • 5

    通过其他方式获取元素作为jQuery对象,然后

    var className = $('#sidebar div:eq(14)').attr('class');
    

    应该做的伎俩 . 对于ID,请使用 .attr('id') .

    如果您在事件处理程序或其他jQuery方法中,其中元素是没有包装器的纯DOM节点,则可以使用:

    this.className // for classes, and
    this.id // for IDs
    

    两者都是标准的DOM方法,并且在所有浏

  • 36

    这是为了将第二个类用于元素中的多个类

    var class_name = $('#videobuttonChange').attr('class').split(' ')[1];
    
  • 2
    <div id="elem" class="className"></div>
    

    用Javascript

    document.getElementById('elem').className;
    

    用jQuery

    $('#elem').attr('class');
    

    要么

    $('#elem').get(0).className;
    
  • 15

    Try it

    HTML

    <div class="class_area-1">
        area 1
    </div>
    
    <div class="class_area-2">
        area 2
    </div>
    
    <div class="class_area-3">
        area 3
    </div>
    

    jQuery

    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script type="application/javascript">
        $('div').click(function(){
            alert($(this).attr('class'));
        });
    </script>
    

相关问题