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

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

1 个答案: