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();
});
});
Related
How to remove data-equalizer-watch tag from this div by using jquery
<div class="row" style="position:relative; height:784px;" data-equalizer-watch="">
Can use removeAttr()
$('[data-equalizer-watch]').removeAttr('data-equalizer-watch')
Try:
$(something).removeAttr("data-equalizer-watch")
see: JQuery documentation on api function removeAttr
You can add an additional class to your div like:
<div class="row other" style="..." data-equalizer-watch="">...</div>`
and from jquery do this: $('.other').removeAttr('data-equalizer-watch');
If you want, you can also use an event listener like:
HTML:
<button id="btn">Remove Equalizer</button>
JavaScript (jQyery):
$('#btn').click(function() {
$('.other').removeAttr('data-equalizer-watch');
});
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.
I have the following HTML:
<div class="windowtemplate movingwindow" style="display: block;">
<div class="top">Attenzione <span class="closebutton"></span></div>
<div class="body">
<p>texthere</p>
<span class="genericbutton">Close</span>
</div>
<div class="bottom"></div>
</div>
I'm trying to hide this box (starting from div class="windowtemplate movingwindow") with jQuery with this code:
function closedialog() {
$(this).parent("windowtemplate").hide();
};
But this doesn't sort any effect, where i'm wrong?
(I'm a newbie with jQuery, so, sorry if it's a really simple problem, but I can't find any solution!)
try this
<span class="genericbutton">Close</span>
and this for your js
function closedialog(element) {
$(element).closest(".windowtemplate").hide();
};
this here doesn't refer to the clicked element.
The selector is wrong, missing . for the class selector.
.parent() doesn't select the grandparent elements, you should use .closest() instead.
You should avoid using attribute event handlers.
$('.genericbutton').on('click', function() {
$(this).closest('.windowtemplate').hide();
});
If the .windowtemplate is generated dynamically you should delegate the event, if you are using jQuery 1.7+ you can use the .on() method:
$(document).on('click', '.genericbutton', function() {
$(this).closest('.windowtemplate').hide();
});
First of all you missed the dot signifying a class and second parent() selector searches only level up in the tree, you need parents().
Use this code -
$('.genericbutton').on('click', function() {
$(this).parents(".windowtemplate").hide();
}
How can I select all following elements from my selector, stopping when the next element is not part of it and ignoring the further elements?
example:
<div class="primary"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="primary"></div>
<div class="sub"></div>
<div class="primary"></div>
<div class="sub"></div>
<div class="sub"></div>
now in js / jquery:
$('.primary').click(function()
{
$(this).... //acces to all following elements with class "sub"
});
so when clicking on the first primary div, I can affect the 3 following "sub" divs
I know I could do some kind of .next() in a while, but this seams inefficient.
Use .nextUntil()
$('.primary').click(function(){
$(this).nextUntil('.primary').text($(this).text())
});
Demo: Fiddle
This will Helpful to you
**SEE DEMO http://jsfiddle.net/dhaval17/W3Jsy/**
I'm trying to alert the ids of each of these divs so it output 11 25 78.
<div id="main">
<div id="section-11">Some content</div>
<div id="section-25">Some content</div>
<div id="section-78">Some content</div>
</div>
I've already selected main and I'm trying to use children but it's not working. Not sure why.
$('#main').children().each(function(){
alert($(this).attr('id'));
});
$('#main div').each(function() {
alert($(this).attr('id').replace(/section-/, ''));
});
This works fine for me:
http://jsfiddle.net/mfgXG/
Are you forgetting to run after on ready?
It does work at least in FF. Have a look there at this JSFiddle
I guess there are more nested div elements there, i.e. those "section" elements are not direct children of the main panel?
In such case, have such selector:
$('#main div[id^="section-"]').each(function(){
To find all matching elements.