My Task:
Insert a Element into the Dom before a specific Element
Return that new inserted Element as a jQuery object
The new inserted Element can not have an Id or anything, the only reliable information to select it is that it was inserted before that other specific Element
Inserting the Element is easy with the .insertBefore method:
var result = $('#myInsertPosition').insertBefore('<div>newInsert</div>');
That gives us a Dom like this:
<div>newInsert</div>
<div id="myInsertPosition"></div>
But result in this case is still the #myInsert Div but I need the newInsert Div.
How can I get the new inserted Div as jQuery object?
Thoughts are with .prev() or other selectors but I can't find a reliable solution.
insertBefore() does return the newly inserted jquery object but your call is backwards, you want to do:
var result = $('<div>newInsert</div>').insertBefore('#myInsertPosition');
Related
I have the followings defined :
var excludedFiltersPanel = $("#excludedFiltersPanel");
var includedfiltersPanel = $("#includedfiltersPanel");
where *Panel is just a div.
in excludedFiltersPanel there are some div's with attribute data-iscorefilter="true" e.g. :
<div id="filterPanel-LastName" class="filterPanel" data-iscorefilter="true">
<Some Stuff here!>
</div>
I am trying to get them and move them to includedfiltersPanel:
It seems neither of these is a correct syntax:
excludedFiltersPanel.('[data-iscorefilter="true"]')
excludedFiltersPanel.$('[data-iscorefilter="true"]')
1.What is the correct syntax?
2.How do I append them to includedfiltersPanel? (I know how to append a single item, but not sure what is the common good practice here, e.g. using for loop or some JQuery magic)
Since excludedFiltersPanel there are some div's with attribute data-iscorefilter="true"
Use .find()
Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
It would look like :
excludedFiltersPanel.find('[data-iscorefilter="true"]')
I want to use jQuery to manipulate a cloned element that is not on the DOM, to perform actions like .remove() on it. Say I have the following code:
var div= $('<div> <div id="div1"></div> </div>');
div.remove('#div1');
console.log(div.html());
The result on the console will still show that the element was not removed. string manipulation is not desirable, I'm looking for something analogue to $().remove()
The div variable will contain a reference to the outer div. You need to use find() to get the inner div by its id:
var $div = $('<div><div id="div1"></div></div>');
$div.find('#div1').remove();
Using the context argument of the jQuery() function:
$('div', div).remove('#div1');
I have a jquery selection like this:
elements= $($('#mytab').find('form').attr('elements')).not('button');
// access elements by name
elements['id']=1;
which is not working obviously :(
I need the jquery to return the collection as HtmlCollection e.g
$('#mytab').find('form').attr('elements')
My qeuestion is, is there any function available e.g like toArray() etc to
return the collection as HtmlCollection, instead of jquery array/ object collection ?
My main objective is to access form elements by name not by index e.g
elements['id'], elements['name']
Html Form elements
Lots of confusion around elements. elements is attribute of html form object which is collection of all the elements in the form
Here is a JSfiddle for this.
elements is a property not an attribute, you should use prop method instead:
var elements = $('#mytab').find('form').prop('elements');
or:
var elements = $('#mytab').find('form')[0].elements;
Well, if you want to filter input elements, you can use get method, there is no need to use elements property:
var elements = $('#mytab form input').get();
http://api.jquery.com/get/
Yup, there is:
$.makeArray($('div'));
This returns a array of all div elements on the page. Obviously, you can use any selector you want.
To get a array of elements, by their name, just use native JS:
document.getElementsByName('myFormElementName');
I am building a block of nested divs around a specific element on the client. I am using jQuery's .wrap() initially to get the first part of the block which is working fine. But now I want to attach the ending block after the element I am wrapping and I am finding I can't attach it to anything because it is all being created at the same time. I tried using insertAfter() but I don't want it to be a sibling of the element I am wrapping, I want it to come after it's parent.
Here is my code:
$(document).ready(function() {
buildShadows('#section');
});
function buildShadows(element){
$(element).wrap("<div class='section_shadow_wrapper'><div class='section_shadow_curve'><div class='section_shadow_outer'><div class='section_shadow_inner_left'><div class='section_shadow_inner_right'>");
$("<div class='section_shadow_bottom_left'><div class='section_test_bottom_right'>").insertAfter(element);
}
What I am trying to do is append the first element of the second part (section_shadow_bottom_left) as a sibling of 'section_shadow_inner_right' but after 'element'
Any help would be appreciated.
Thanks.
You should be able to just traverse up to the new parent you just created.
Have you tried this?
function buildShadows(element){
$(element).wrap('<div class="section_shadow_wrapper clearfix"><div class="section_shadow_curve"><div class="section_shadow_outer"><div class="section_shadow_inner_left"><div class="section_shadow_inner_right">')
.parent().after('<div class="section_shadow_bottom_left"><div class="section_test_bottom_right">');
}
Try traversing to the next sibling of the original element and using .insertBefore() on it.
var nextsibling = $(element).next();
//Wrap code
$("<div class='section_shadow_bottom_left'><div class='section_test_bottom_right'>").insertBefore(nextsibling);
Perhaps I'm using $.data incorrectly.
Assigning the data:
var course_li = sprintf('<li class="draggable course">%s</li>', course["fields"]["name"]);
$(course_li).data('pk', course['pk']);
alert(course['pk']); // shows a correct value
alert($(course_li).data('pk')); // shows null. curious...
course_li is later appended to the DOM.
Moving the li to a different ul:
function moveToTerm(item, term) {
item.fadeOut(function() {
item.appendTo(term).fadeIn();
});
}
Trying to access the data later:
$.each($(term).children(".course"), function(index, course) {
var pk = $(course).data('pk');
// pk is undefined
courses.push(pk);
});
What am I doing wrong? I have confirmed that the course li on which I am setting the data is the same as the one on which I am looking for it. (Unless I'm messing that up by calling appendTo() on it?)
When you store the data:
$(course_li).data('pk', course['pk']);
you're creating an element but not saving it, so it's lost. Your alert test test the wrong value; it should be:
$(course_li).data('pk', course['pk']);
alert($(course_li).data('pk'));
which is null. Consider:
$(course_li);
$(course_li);
This creates two different elements with source equal to course_li, which are then promptly lost. What you need to do is create the element first, then work with that single element (i.e. don't call $(course_li) more than once). For example,
var course_li = $(sprintf('<li class="draggable course">%s</li>',
course["fields"]["name"]));
course_li.data('pk', course['pk']);
parent.append(course_li);
Note that course_li now holds an element, rather than a string.
try checking to see if the element being created by this call:
$(course_li)
is a single 'li' element, or a div. From the doco:
When the HTML is more complex than a single tag without attributes, as it is in the above example... snip ...Specifically, jQuery creates a new <div> element and sets the innerHTML property of the element to the HTML snippet that was passed in
So it's probably creating a div that you are assigning the data to, so when you select the 'li' itself, you are getting a child of the actual element that you set the data on.