Question

我已经呈现了下表

   <table id="layout" width="100%" border="0" cellspacing="6" cellpadding="0">
        <tr>
           <td>
             <div style="position: static;" class="type_normal type_common" title="33">33</div>
           </td>
           <td>
             <div style="position: static;" class="type_selected ticket_type_common" title="34">33</div>
           </td>
        </tr>
   </table>

我的要求是单击特定单元格，我想要div标签的值和类。

        $("#layout").delegate('tr td','click',function(){
            var seat_selected=$(this).text();
            seat_selected=$(this).html();
            }
        });

使用$（this）.text给出了数字33。使用$（this）.html（）给出td内的整个部分（我得到整个div）。但我只想要div标签的类。将div标签的类名称变为变量的过程是什么。

我的要求是检查div标签中的特定类，并将div标签更改为另一个类。例如，如果我单击的单元格具有class（type_normal type_common）的div标签，我想将div标签的类更改为（type_selected type_common）

请建议。

Answer 1

您可以通过以下方法获取课程名称，

var classOfDiv = $(this).find('div').attr('class');

您的代码将是

$("#layout").delegate('tr td', 'click', function() {
        var seat_selected = $(this).text();
        seat_selected = $(this).html();
        var classOfDiv = $(this).find('div').attr('class'); 
        if($(this).find('div').attr('class') == "type_normal type_common")
            $(this).find('div').attr('class', 'type_selected type_common')
});

Answer 2

$(this).find('div').attr('class')

Answer 3

在click事件处理程序的回调函数中，this引用<td>元素。然后，您可以使用.find() jQuery函数选择该元素内与给定选择器匹配的元素。在您的情况下，这将是这样的：

var $tdDiv = $(this).find('div');

它为您提供了一个jQuery对象，其中包含<div>中的<td>元素，然后您可以使用className属性来获取其当前类：

var divClass = $tdDiv.prop('className');

然后你可以使用.text()函数来获取它的＆＃34;值＆＃34;：

var divValue = $tdDiv.text();

编辑：根据添加到问题中的其他信息，特别是此部分：

我的要求是检查div标签中的特定类，并将div标签更改为另一个类。例如，如果我单击的单元格具有class（type_normal type_common）的div标签，我想将div标签的类更改为（type_selected type_common）

您可以使用.hasClass()函数来检查jQuery对象中的元素是否具有特定类，addClass()函数是否添加类以及removeClass()函数删除一个类（或使用toggleClass()添加或删除，具体取决于该类是否已在该元素上。）

var $tdDiv = $(this).find('div.type_common.type_normal')
$tdDiv.removeClass('type_normal').addClass('type_selected');

Answer 4

$("#layout").on('click', 'tr td', function() {
    var seat_selected = $(this).children(":first").attr('class')
    alert(seat_selected)
});

在此测试：http://jsfiddle.net/RASG/mqLfd/

如何使用jquery访问td中div标签的class属性

4 个答案: