Преобразование JavaScript 'this' в jQuery '$ (this)' - PullRequest
Новая
       6

Преобразование JavaScript 'this' в jQuery '$ (this)'

10 голосов
/ 10 января 2012

Пожалуйста, посмотрите на следующий код: 

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

19 голосов
/ 10 января 2012

Преобразование элемента 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 /

2 голосов
/ 10 января 2012

Попробуйте это: 

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

Если вы хотите прочитать все элементы в списке, вы можете использовать: 

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

Надеюсь, это поможет.

0 голосов
/ 10 января 2012

Попробуйте это 

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