How to get a jQuery object from an html object?

Question

For example, I have some selector:

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

I can change his styles with the .css method. But if I pass it on to some function

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

Where

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

then I will not be able to use jQuery methods and will have to be content with javascript. What transformations can I do to work with jQuery inside a function?

I will add an example from the project, the previous error occurs in the line console.log(object.style.margin); Here is the code:

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

specifically, in the given example, the error will be in the string object.style.margin since the find method returns a jQuery object.
In the above code, the error will still be in the console.log(object.style.margin) since the jQuery object does not have a style property.
The only option why this might work is that the html element is passed to the function.
that is, the call is not myfunc($(this)) , but myfunc(this)
You are right, I gave a bad example, it does not display the error that is occurring.
The original example did not delete, added only an example from this project.
Make a minimal reproducible example , following the example of what is in the answer.
So that you can run and see what is really done exactly as you say.
In the meantime, nothing is clear, it is possible that you have a few more places.
in which you call setRoom by passing native html elements there and not jQuery objects
I tried to leave the key points associated with changes to objects.

Grundy grundy 58.6k 7 49 93 · Accepted Answer · 2017-01-08T18:16:57

This behavior is typical when passing an HTML element to a function, rather than a jQuery object.

The error is in the following lines.

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

id_list through the collection of id_list elements in the id_list function in the id parameter, we get the corresponding HTMLElement, not the jQuery object.

As a result, instead of the jQuery function closest , Element.closest is called, which also returns an HTMLElement.

As a solution, you can create a jQuery object from the id element

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

Or always create jQuery objects inside the setRoom function

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

Thanks for the detailed explanation. Now I will move on. - Evgeny Vasilyev

Answer 2 · 2017-01-08T17:35:34

Have you tried?

 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>

The error, of course, is displayed, but only because you specified a margin without quotes, which makes the interpreter think that this is an uninitialized variable.

I came up with this example right away, now I will correct it a little.
And you click Выполнить код to see if it works or not.
@YevgenyVasilyev, make a snippet, similar to the snippet in the answer, but which would reproduce your mistake
@ Evgeny Vasiliev, before solving the problem, it is desirable to localize it.
As a crutch, you can simply forcibly create a jQuery object $(object) , etc. inside the function.
but it's better to just find the place where exactly the error occurs

How to get a jQuery object from an html object?

2 answers 2

More articles: