将JavaScript'this'转换为jQuery'$（this）'

时间：2012-01-10 09:37:58

标签： javascript jquery html traversal

请查看以下代码：

<HTML>
    <HEAD>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

        <SCRIPT type="text/javascript">
            function test(target) {     alert(target.nodeName); }
        </SCRIPT>
    </HEAD>

    <BODY>
        <DIV>
            <ul>
                <li onclick="test(this)">This is fair</li>
                <li onclick="test(this)">No its not</li>
                <li onclick="test(this)">Why not</li>
                <li onclick="test(this)">Becoz...</li>
            </ul>
        </DIV>
    </BODY>
</HTML>

函数测试接收目标（li节点）作为参数。

现在，我可以以某种方式将此变量转换为jQuery $(this)或$(e.target)或任何其他jQuery变量，以便我可以使用jQuery方式遍历文档吗？

3 个答案:

答案 0 :(得分：19)

将DOM元素转换为jQuery对象

要将DOM元素转换为jQuery对象，请执行以下操作：

var jquery_object = jQuery(dom_element);

因此，在您的示例中，它将是$(this)或$(event.target) - 取决于您是否需要当前元素或实际触发事件的元素（在您的情况下它们是相同的，除非事件将被一些后代元素解雇。）

将jQuery对象转换为DOM元素

要将jQuery对象转换为DOM元素，您只需将jQuery对象视为数组或使用其get()方法：

var dom_element = jquery_object[0];

或

var dom_element = jquery_object.get(0);

以上将返回存储在jQuery对象中的第一个对象 - 如果只有一个，则应该没有问题（如果有更多，只需将0更改为其他索引以获取适当的元素，或者只是省略get()将所有元素检索为数组的参数。

您的代码已更改为使用jQuery

您的代码可能如下所示（如果您坚持使用难以维护的事件属性）：

<HTML>
<HEAD>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<SCRIPT type="text/javascript">
    function test(target) {     alert(target.get(0).nodeName); }
</SCRIPT>

</HEAD>
<BODY>

<DIV>
    <ul>
        <li onclick="test($(this))">This is fair</li>
        <li onclick="test($(this))">No its not</li>
        <li onclick="test($(this))">Why not</li>
        <li onclick="test($(this))">Becoz...</li>
    </ul> </DIV>

</BODY>

除了在这种情况下使用jQuery是完全没用的，你可以直接在DOM元素上操作，在需要时将它们转换为jQuery：）

您的解决方案已更改为绑定<body>

之外的事件

使用jQuery在jQuery 1.7+中绑定事件的代码可能如下所示：

<HTML>
<HEAD>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<SCRIPT type="text/javascript">
    $(function(){
        $('li').on('click', function(event){
            alert(event.target.nodeName);
        });
    });
</SCRIPT>

</HEAD>
<BODY>

<DIV>
    <ul>
        <li>This is fair</li>
        <li>No its not</li>
        <li>Why not</li>
        <li>Becoz...</li>
    </ul> </DIV>

</BODY>

请参阅上面的操作：jsfiddle.net/tadeck/2PqPP/

答案 1 :(得分：2)

试试这个：

$(document).ready(function(){
   $('ul li').click(function(){
       alert($(this).index());
   });
});

如果您想阅读列表中的所有元素，可以使用：

$(document).ready(function(){
    $('ul li').each(function(){
        alert($(this).index());
    });
)};

希望这有帮助。

答案 2 :(得分：0)

试试这个

<HTML>
<HEAD>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<SCRIPT type="text/javascript">        
    $(function(){
    $('ul li').click(function(){
         alert($(this).html());
     })
    })

</SCRIPT>

</HEAD>
<BODY>

<DIV>
    <ul>
        <li>This is fair</li>
        <li>No its not</li>
        <li>Why not</li>
        <li>Becoz...</li>
    </ul> 
</DIV>

</BODY>
相关问题
最新问题