Lets say I've got something like this:
<div class='item'>some code</div>
<div class='item current'>some code</div>
<div class='item'>some code</div>
The next element I can get by document.querySelector(".item.current + .item"). That's great and works fine but.. How can I get to the previous element?
You can get the previous element "sibling" with the previousElementSibling property. For example
document.querySelector('.item.current').previousElementSibling
Would return the first element, <div class="item"></div>
document.querySelector(".item.current").previousElementSibling
There is no "previous sibling" selector that you can use directly.
You can use javascript to select it using document.querySelector(".item.current").previousElementSibling
You can just do document.querySelector(".item.current").previousElementSibling.
Related
I have a root div element and inside that div i have an image.
<div id="root">
<img id="msg"/>
</div>
Now using jquery i used to prepend n number of div elements inside that root div. The issue is that the new div elements come before the img tag. . like
<div id="root">
<div id="b"></div>
<div id="a"></div>
<img id="msg"/>
</div>
But I need it to prepended div elements to appear after the img tag like
<div id="root">
<img id="msg"/>
<div id="b"></div>
<div id="a"></div>
</div>
Any suggestions as to how I can achieve this using jQuery?
Try:
$("your html").insertAfter($("#msg"));
Like this maybe:
$("#msg").after();
Simply use the append method instead of prepend like this:
$('#root').append('<div>Div N</div>')
Here is the working example in JSFiddle.
And here is the documentation on jQuery's append method.
Use append() instead of prepend():
append() method add div after first div
prepend() method add div before first div.
Try
var newDiv = $("<div>test</div>");
$('img').after(newDiv);
I'm loading div element through jQuery .load() method like this:
$(document).ready(function() {
$(".module-wrapper").load("index.php?option=com_k2&view=itemlist&Itemid=974 .genericItemList");
});
Through that I get list of items, let's say 5 of them.
<div class="module-wrapper">
<div class="genericItemList">
<div class="genericItemView">Item 1</div>
<div class="genericItemView">Item 2</div>
<div class="genericItemView">Item 3</div>
<div class="genericItemView">Item 4</div>
<div class="genericItemView">Item 5</div>
</div>
</div>
Now I want to use jQuery .remove() because I want to show just first 3 items.
HTML above is just example, in reality each item has a lot of HTML code so I want to use jQuery .remove() instead of CSS display:none.
I do that like this:
$(window).load(function() {
$(".module-wrapper .genericItemView:gt(2)").remove();
});
This is working only Chrome, but not in Firefox or IE, where I can see all 5 items.
Any suggestions?
To ensure that code only runs after the elements have been loaded, you should put it in the callback function passed to load():
$(document).ready(function() {
$(".module-wrapper").load(
"index.php?option=com_k2&view=itemlist&Itemid=974 .genericItemList",
function() {
$(".module-wrapper .genericItemList:gt(2)").remove();
}
);
});
Your class selector may also be wrong, I tried to rectify it in the code above. It looks like you want to match descendants of .module-wrapper that expose the genericItemList class, but your original selector matches the elements that expose both the module-wrapper and genericItemView classes instead.
change genericItemList to genericItemView
$(".module-wrapper .genericItemView:gt(2)").remove();
Change your class name genericItemView to genericItemList.
$(".module-wrapper .genericItemList:gt(2)").remove();
See Demo
Change it $(".module-wrapper.genericItemView:gt(2)").remove(); to $(".module-wrapper .genericItemList:gt(2)").remove();
add space before .genericItemList
$(".module-wrapper .genericItemList:gt(2)").remove();
You can use the success callback of the load() method to write dom manipulation
$(document).ready(function() {
$(".module-wrapper").load("index.php?option=com_k2&view=itemlist&Itemid=974 .genericItemList", function(){
$(".genericItemView:gt(2)", this).remove();
});
});
select nth child like this I want to select seconds child .
$(this).prev().children[1].removeClass("necry").addClass("necry_er");
And this HTML
<div class="reg_label">
<div class="def">Family</div>
<div class="necry">Necessary Field</div>
<div class="clear"> </div>
</div>
I expect this result:
<div class="necry_er">Necessary Field</div>
Use eq() to reduce a set of matched elements to the one at the specified index.
$(this).prev().children().eq(1).removeClass("necry").addClass("necry_er");
There's also a :nth-child selector:
$('#elementID:nth-child(2)').doSomething();
To just swap the two classes you can do:
$('.necry').toggleClass('necry necry_er');
How exactly to go about finding the element you want is a little hard to tell, as there is no explanation as to what this is or what context it is in ?
what about something like this?
var nec = $(this).parent().find(".necry");
nec.removeClass("necry");
nec.addClass("necry_er");
I want to insert an opening div but it closes itself automatically. How do I get this to work.
I want to wrap thses two divs in one div called controls...
<div class="carousel-prev prev-next"></div>
<div class="carousel-next prev-next"></div>
So I get...
<div id="controls">
<div class="carousel-prev"></div>
<div class="carousel-next"></div>
</div>
I did try:
$(".jcarousel-prev").before("<div id='controls'>");
But as I mentioned above, it closes automatically.
$(".prev-next").wrapAll("<div id='controls'>");
in your particular case you're removing class too i.e.
$(".prev-next").removeClass('prev-next').wrapAll("<div id='controls'>");
You can use .wrapAll():
$(".prev-next).wrapAll('<div />');
You should use wrap function to achieve that:
http://api.jquery.com/wrap/
try this...
$(".prev-next").appendTo("<div id='controls'>");
I'm trying to remove all the sibling elements after a particular div, lets say the div tag with id = id8.
<form>
<div id="id5">something ...<div>
<div id="id8">something ...<div>
<div id="id3">something ...<div>
<div id="id97">something ...<div>
<div id="id7">something ...<div>
...
<div id="idn">some text ...<div>
</form>
To do that I use the following code in jquery.
$("#id8 ~ div").remove();
It works fine in Firefox, but It doesn't work in IE7.
Is there an alternative way to archieve this, using jquery and just giving the tag id from the element I want to start removing the elements?
Thanks
Thanks everybody for your help
I end up with this solution based on the accepted answer
function removeAfter(el,tag){
element = $('#'+el);
var aElements = $(tag,element.parent());
var index = (aElements.index(element));
for(i=(index+1);i<aElements.length;i++) {
$('#'+$(aElements.get(i)).attr('id')).remove();
}
}
just call
removeAfter('id8', 'div')
Two things!
1) Close your <div> tags! It should look like this:
<form>
<div id="id5">something ...</div>
<div id="id8">something ...</div>
<div id="id3">something ...</div>
<div id="id97">something ...</div>
<div id="id7">something ...</div>
<div id="idn">some text ...</div>
</form>
2) The ~ operator only matches siblings that follow the matched element (ie it will match id3, id97, id7 and idn, but not id5). To match every sibling, including id5, you do this:
$("#id8").siblings("div").remove();
That should leave you with just id8. I tested this in Firefox 3.5.5 and IE7.0something. Hope that helps!
Three steps here:
Find the index number of the element we've clicked, with respect to its parent.
Loop through all the div elements contained within this parent, starting after the one we just found
Delete each div found
$(document).ready(function(){
$('#parent').children().click(function(){
var index = ($('div',$(this).parent()).index(this));
for(i=(index+1);i<$('div',$(this).parent()).length;i++){
$($('div',$(this).parent()).get(i)).hide();
}
});
});
This will work on this HTML
<div id="parent">
<div id="c1">c1</div>
<div id="c2">c2</div>
<div id="c3">c3</div>
<div id="c4">c4</div>
<div id="c5">c5</div>
</div>
Comment here if you've got any more problems on the matter!
P.S. An application of this solution exact to your request is the following
function removeAfter(el){
element = $('#'+el);
var index = ($('*',element.parent()).index(element));
for(i=(index+1);i<$('*', element .parent()).length;i++){
$($('*', element.parent()).get(i)).hide();
}
};
EDIT:
Editing the answer below to add what should be a fix for the problem:
$("#id8").nextAll().remove();
END EDIT.
Ok. This appears to be an interesting bug - initial testing seems to indicate it's a jquery bug although I haven't found any specific mention of it anywhere.
The bug seems to be that if your initial selector tag is the same type as its siblings then it will fail to return any siblings in IE7.
I tested it using the jQuery example code for the selector itself and was able to duplicate your problem in IE8 emulating IE7.
If you check the jquery example code I'll stick below you can see that the actual element they're using as the initial selector is a span and the sibling elements are all divs whcih seems to me to indicate they know about this bug and haven't documented it, which is both cunning and shitty.
<script>
$(document).ready(function(){
$("#prev ~ div").css("border", "3px groove blue");
});
</script>
<div>div (doesn't match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>
<div>div sibling <div id="small">div niece</div></div>
<span>span sibling (not div)</span>
<div>div sibling</div>
Change the #prev span to a div and you'll get the same failure as you're getting currently. I'd submit a bug with the jquery team.