Question

如何获取div的类名？

<body>
    <a id="append">Add DIV</a> 
    <div id="parent"></div>
    <script>
        $(document).ready(function() {
          var count = 0;
          $('#append').click(function() {
            $('#parent').append('<div
                class="article' + count + '">im div</div>');
            count++;
          });
          $('div').click(function() {
            alert(this.class);
          });
        });
    </script>
</body>

当我试图在警告中显示div的类名时，它显示为unfind。

Answer 1

有一个attr属性：

$(this).attr('class');

Answer 2

这是您的问题的示例

$(document).ready(function(){
alert($('#ss').attr('class'));
});

.ssclass{
width:100%;
  height:100vh;
  background:#ff8800;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ss" class="ssclass"></div>

Answer 3

试试这个......

$(document).ready(function() {
  var count = 0;
  $('#append').click(function() {
    $('#parent').append('<div class="article' + count + '">im div</div>');
    count++;
  });
  $('div').click(function() {
    alert($(this).attr('class'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<body>
  <a id="append">Add DIV</a> 
  <div class='className' id="parent"></div>
</body>

Answer 4

对动态创建的元素使用事件委派。否则，您的课程不会在点击时触发。

$('#parent').on('click', 'div', function() {
  var getclass = $(this).attr('class');
  console.log(getclass);
});

Answer 5

目前您使用的是＆＃34; direct＆＃34;绑定，它只会附加到代码进行事件绑定调用时页面上存在的元素。在动态生成元素时，您需要使用Event Delegation委托事件方法{。}}。

一般语法

$(document).on('event','selector',callback_function)

此外，您需要阅读className媒体资源或使用.on()

＆＃13;

$(document).ready(function() {
  var count = 0;
  $('#append').click(function() {
    $('#parent').append('<div class="article' + count + '" > im div </div>');
    count++;
  });
  $('#parent').on('click', "div", function() {
    alert(this.className)
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="append">Add DIV</a> 
<div id="parent"></div>

＆＃13;

Answer 6

这就是你如何获得所有class name div的方法。参考工作演示。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	
</head>

<style type="text/css">




</style>


<body>

<div class="main">
	<div class="classone">my name is class one</div>
	<div class="classtwo">my name is class two</div>
	<div class="classthree">my name is class three</div>
</div>

<script type="text/javascript">

$(document).ready(function(){
	
	var thelength = $("div.main div").length;//get how many divs
	for(var i=0;i<thelength;i++)
	{
		var theclass_name = $("div.main div").eq(i).attr('class');//get the class name of each.
		alert(theclass_name);
	}
});

</script>




</body>


</html>

Answer 7

使用它

 <body> 
  <a id="append">Add DIV</a> 
  <div id="parent"></div>
  <script>
    $(document).ready(function() { 
      var count = 0; 
      $('#append').click(function(){    
        $('#parent').append('<div class="article'+count+'">im div</div>'); count++; 
      }); 
      $('#parent div').click(function(){
        alert($(this).attr('class'));  
      }); 
    }); 
  </script>
</body>

Answer 8

使用事件委托代替Fiddle

$('#parent').on('click','div',function() {
className = $(this).attr('class');
    alert(className);
});

如何获取div的类名？

8 个答案: