Fatal编程技术网
  • jquery/
  • jquery：如何查找元素的所有类名和实例数

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

jquery class indexing

jquery：如何查找元素的所有类名和实例数,jquery,class,indexing,mouse,unique,Jquery,Class,Indexing,Mouse,Unique,我创建了一组大小不同的div，它们都位于父级中。这些div具有不同的类名，具体取决于它们的大小和内容。它们共享的是另一个名为EditBlock的类名。制作div的代码是 <script type="text/javascript"> function makeSmallBlockdiv () { var smallBlock = $('<div class="SmallBlock EditBlock"></div>').appendTo("#canvas")

我创建了一组大小不同的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>


函数makeSmallBlockdiv（）
{
var smallBlock=$（''）.appendTo（“#canvas”）；
smallBlock.draggable（{containment:#canvas'，scroll:false，grid:[10,10]}，{cursor:move'，cursorAt:{top:125，left:150}）
smallBlock.append（'文章标题'）
smallBlock.append（“>”）
smallBlock.append（“”）
}
第二部分如下

<!-- 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> 


函数makeLargeBlockdiv（）
{
var largeBlock=$（''）.appendTo（“#canvas”）；
可拖动（{containment:#canvas'，scroll:false，grid:[10,10]}，{cursor:“move”，cursorAt:{top:250，left:210}）
largeBlock.append（'文章标题'）
largeBlock.append（“>”）
largeBlock.append（“”）
}
我遇到的问题是，我需要确定哪个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>


$（文档）.ready（函数（）{
$（'.EditBlock'）.bind（'mouseover mouseout click'，函数（事件）{
var$tgt=$（event.target）；
if（！$tgt.closest（'.syntax\u hilite'）.length）{
$tgt.toggleClass（event.type=='click'？'outline element clicked'：'outline element'）；
}
});
});
总而言之，我需要获取div的类名以及与div实例关联的索引

对不起，我的话太多了，但我无法用更少的话来解释

我忘了提到我刚刚开始学习jquery，在接下来的日子里我会问更多的问题

感谢您的帮助

谢谢

Chris

您似乎正在动态创建
div的
。因此，您需要使用事件委派附加事件。


$('.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);         
    }
});



​$（“#小，#大”）。在（'click'，function（）上{
var$container=$（“#container”）；
if（this.id=='small'）{
$container.append（“”）+
"小方块";；
}
否则{
$container.append（“”）+
"大块";；
}        
});
$（'#container'）。在（'click'，'.EditBlock'，函数（事件）{
var$this=$（this）；
var$container=$（“#container”）；
//然后，要访问**类名**，您可以这样做
var指数；
if（$this.hasClass（'smallBlock'））{
index=$container.find（'.smallBlock'）.index（$this）；
警报（'当前小数据块索引为：'+索引）；
}
else if（$this.hasClass（'largeBlock'））{
index=$container.find（'.largeBlock'）.index（$this）；
警报（'当前大数据块索引为：'+索引）；
}
});



您似乎正在动态创建
div的
。因此，您需要使用事件委派附加事件。


$('.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);         
    }
});



​$（“#小，#大”）。在（'click'，function（）上{
var$container=$（“#container”）；
if（this.id=='small'）{
$container.append（“”）+
"小方块";；
}
否则{
$container.append（“”）+
"大块";；
}        
});
$（'#container'）。在（'click'，'.EditBlock'，函数（事件）{
var$this=$（this）；
var$container=$（“#container”）；
//然后，要访问**类名**，您可以这样做
var指数；
if（$this.hasClass（'smallBlock'））{
index=$container.find（'.smallBlock'）.index（$this）；
警报（'当前小数据块索引为：'+索引）；
}
else if（$this.hasClass（'largeBlock'））{
index=$container.find（'.largeBlock'）.index（$this）；
警报（'当前大数据块索引为：'+索引）；
}
});



我将代码更改为您建议的代码，它可以工作，但是如何获得唯一的类名和索引？对不起，我对jquery是全新的，您所说的.on是什么意思？他的意思是您需要使用.on（）而不是.bind（）。。这是从版本1.7.0附加事件的新方法这里有一个名为EditBlock的通用类名，它与所有div关联，但我也有描述div类型的类名；因为我可以有多个相同类型的div，所以我需要找出我选择的类以及该div的哪个副本是highlite。看看前两段代码，你可以看到有两个类，分别叫做SmallBlock和LargeBlock。对不起，我没有看到你编写的其余代码。我现在要把它放进去，但是你能告诉我如何保持我的元素高优先级部分吗？我将代码更改为你建议的代码，并且它可以工作，但是我如何获得唯一的类名和索引？对不起，我是jquery的新手，你说的.on是什么意思？他是说你需要使用.on（）而不是.bind（）。。这是从版本1.7.0附加事件的新方法这里有一个名为EditBlock的通用类名，它与所有div关联，但我也有描述div类型的类名；因为我可以有多个相同类型的div，所以我需要找出我选择的类以及该div的哪个副本是highlite。看看前两段代码，你可以看到有两个类，分别叫做SmallBlock和LargeBlock。对不起，我没有看到你编写的其余代码。我现在就要把它放进去了，但是你能告诉我如何保持我的元素高度化部分吗？