Как из html объекта получить объект jQuery?

304

09 января 2017, 23:11

К примеру, есть у меня некоторый селектор:

$(".external_network_id").each(function(){
    console.log($(this).css('margin'));        
});

Я могу изменить его стили при помощи метода .css . Но если я передам его в некую функцию

$(".external_network_id").each(function(){
    myfunc($(this));
});

где

function myfunc(object){
    console.log(object.style.margin); //сработает корректно
    console.log(object.css('margin'));  //выведет ошибку
}

то я не смогу использовать методы jQuery и придётся довольствоваться JavaScript. Какие преобразования можно сделать, чтобы работать с jQuery внутри функции?

Добавлю пример из проекта, в предыдущем ошибка происходит в строке console.log(object.style.margin); Вот код:

$("body .equipment").each(function(){
                    findNetwork($(this));  
            });
function findNetwork(object){
 var id_list = object.find(".network_id");
        $(".room").find(".network .network_id").each(function(){
            var net_in_room = $(this);
            $.each(id_list, function(index, id){
                if (net_in_room.text() == id.textContent){
                    setRoom(net_in_room.closest(".room"), id.closest(".equipment"));
                }
            });
        });
function setRoom(room, object){
        var obj_y = Number(object.style.marginLeft.slice(0, -2));
        var obj_x = Number(object.style.marginTop.slice(0, -2)); //при попытке использовать .css("margin-left") вместо style.marginTop.slice происходит ошибка.
        var obj_width = object.width(); //ошибка происходит конкретно в этой строке
        var obj_height = object.height();

    }

Answer 1

Такое поведение характерно при передаче в функцию HTML-элемента, а не jQuery-объекта.

Ошибка заключается в следующих строках

$.each(id_list, function(index, id){
    if (net_in_room.text() == id.textContent){
        setRoom(net_in_room.closest(".room"), id.closest(".equipment"));
    }
});

Перебирая коллекцию элементов id_list в функции-коллбэке в параметре id получаем соответствующий HTMLElement, а не jQuery-объект.

В итоге вместо jQuery функции closest вызывается Element.closest, которая так же возвращает HTMLElement.

В качестве решения можно создать jQuery-объект из элемента id

$.each(id_list, function(index, id){
    var $id = $(id);
    if (net_in_room.text() == $id.text()){
        setRoom(net_in_room.closest(".room"), $id.closest(".equipment"));
    }
});

Либо всегда создавать jQuery-объекты внутри функции setRoom

function setRoom(room, object){
    var $room = $(room);// чтобы заранее исключить ситуацию, что в первом параметре так же будет передан не jQuery объект
    var $object = $(object);
    ...
    var obj_width = $object.width(); // работает
    var obj_height = $object.height(); 
}

Answer 2

А вы пробовали?

function myfunc(object){ 
    console.log(object.css('margin'));   
} 
 
myfunc($(".external_network_id"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="external_network_id"></div>

Ошибка, конечно, выводится, но только потому, что вы указали margin без кавычек, что заставляет интерперетатор думать, что это неинициализированная переменная.