jquery：如何找到元素的所有类名和实例数

Question

我创建了一组不同大小的 div，它们都驻留在父级中。这些 div 具有不同的类名，具体取决于它们的大小和内容。他们共享的是另一个名为 EditBlock 的类名。制作 div 的代码是 ....

<script type="text/javascript">

function makeSmallBlockdiv ()
{
var smallBlock = $('<div class="SmallBlock EditBlock"></div>').appendTo("#canvas");
smallBlock.draggable({containment: "#canvas", scroll: false, grid: [10, 10]}, {cursor: "move", cursorAt: {top: 125, left: 150}})
smallBlock.append('<div class="article_title fontCenter fontBold font24">Article Title</div>')
smallBlock.append('<div class="article_Image"><img style="width: 250px;" src="<? echo $image1 ?>"></div>')
smallBlock.append('<div class="font14"><? echo substr($article_text, 0, 200) ?></div>') 

}

</script>

第二个div如下..

<!-- script to create large block draggable div  -->  

<script type="text/javascript">
function makeLargeBlockdiv ()
{
var largeBlock = $('<div class="LargeBlock EditBlock"></div>').appendTo("#canvas");
largeBlock.draggable({containment: "#canvas", scroll: false, grid: [10, 10]}, {cursor: "move", cursorAt: {top: 250, left: 210}})
largeBlock.append('<div class="article_title fontCenter fontBold font32">Article Title</div>')
largeBlock.append('<div class="article_Image"><img style="width: 90%" src="<? echo $image ?>"></div>')

largeBlock.append('<div class="font14"><? echo substr($article_text, 0, 200) ?></div>') 

}    
</script> 

我遇到的问题是我需要确定哪个 div 有鼠标在它上面。由于 thres div 可以有多个实例，因此我还需要找到该 div 的正确索引。

这是我用来识别 div 的代码，但我不知道如何获取索引和唯一的类名。

<script type="text/javascript">
    $(document).ready(function() {
      $('.EditBlock').bind('mouseover mouseout click', function(event) {
        var $tgt = $(event.target);
        if (!$tgt.closest('.syntax_hilite').length) {
          $tgt.toggleClass(event.type == 'click' ? 'outline-element-clicked' : 'outline-element');      
        }
      });
    });
</script>

回顾一下，我需要获取 div 的类名以及与 div 实例关联的索引。

对不起，我啰嗦了这么多，但我无法用更少的词来解释。

我忘了说我刚开始学习 jquery，明天会问更多问题。

感谢任何帮助。

谢谢

克里斯

Answer 1

您似乎正在创建 div's dynamically 。所以你需要使用事件委托来附加事件。

$('.EditBlock').bind('mouseover mouseout click', function(event) {

应该是

$('body').on('mouseover mouseout click','.EditBlock', function(event) {
    var $this = $(this);
    //Then to access the **classNames** you can do this

    var classNames[] = $this.attr('class').split(' ');

   // To access the index of the current div..

   var index = $this.index();

});

更新

试试这个

​$('#small , #big').on('click', function(){
    var $container = $('#container');
    if(this.id === 'small'){
          $container.append('<div class="smallBlock EditBlock">' +
                              'Small Block </div>');
    }
    else{
          $container.append('<div class="largeBlock EditBlock">' +
                              'Large Block </div>');
    }        
});

$('#container').on('click','.EditBlock', function(event) {
    var $this = $(this);
    var $container = $('#container');
    //Then to access the **classNames** you can do this
    var index;
    if($this.hasClass('smallBlock')){
       index = $container.find('.smallBlock').index($this);
        alert('Current Small Block index is : ' + index);        
    }
    else if ($this.hasClass('largeBlock')){
        index = $container.find('.largeBlock').index($this);
        alert('Current Large Block index is : ' + index);         
    }
});

Check Fiddle