I am working on a piece of code to check if there is in the list item a div called star rating. If it doesnt excist, add to the price tag an extra margin top (so i can level out these items). My JQuery is as followed
$(document).ready(function() {
$("li.product").each(function(){
if($(".star-rating").length === 0) {
$("span.price").css({"margin-top" : "1em"});
}
});
});
This code works fine to a certain point. What it technically does is it doesnt check the specific list item but the whole document. Is there a way I can just check the specific list item and add to the span.pricein that item the css? cause now it finds 4 times the star-rating (4 list items), while it is only in one list item.
Search under each "li.product":
$("li.product").each(function(){
if($(this).find(".star-rating").length === 0) {
$(this).find("span.price").css({"margin-top" : "1em"});
}
});
if($(".star-rating",this).length === 0) {
$("span.price",this).css({"margin-top" : "1em"});
}
Add context parameter to jQuery method
$('li.product').not(':has(.star-rating)').find("span.price").css({"margin-top" : "1em"});
Without "if" and "each" that's what Jquery is for...
Related
I am working with a list in SharePoint 2013 that creates an unordered list dynamically on mouseover (the List item ECB for those familiar with SharePoint).
The class name that is given has spaces added after at, 1 additional space for each menu item. I'm not sure if this affects the class property value in jquery so that is why I'm using the begins with notation.
I am needing to hide several menu items and I'm not getting alerts in my debug so I'm thinking my syntax is off.
I'm using this:
if($('ul[class^="ms-core-menu-list"] li[text="View Item"]') ! == null) {
alert('F');
} else {
alert('no F');
}
I do not get alerts so either my syntax is wrong and I need assistance with that or the menu item isn't created when this code executes, in which case I'm wondering how it is possible to get at these menu items using jquery as I'm unable to deploy code in my environment.
I've looked at a number of blogs over the past few days but nothing recommended comes close to working for me.
Thank you
If you're trying to find out if the page contains any li tags that with the text "View Item" that are children of ul tags with the class "ms-core-menu-list" you can use this selector:
$('li:contains("View Item")', $('ul.ms-core-menu-list')).length;
In the context of your example:
if($('li:contains("View Item")', $('ul.ms-core-menu-list')).length) {
alert('F');
} else {
alert('no F');
}
Use this :
if($('ul.ms-core-menu-list li[text="View Item"]').length==0)
...
Note that JQuery always returns a JQuery object which is not null.
The thing to remember about jQuery selectors is that they will always return an object. Even if you don't find anything, you are still given the jQuery API to call things like .hide(), .show(), etc. You won't get an error if you haven't selected anything when calling a jQuery method, you just won't have anything selected for the calls to act upon.
What you can do to infer if any elements are selected is by treating it like the psuedo-array that it is -- you can use .length.
In your case,
if ($('ul.ms-core-menu-list li[text="View Item"]').length > 0) {
alert('F');
} else {
alert('no F');
}
I have the below code that checks to see if any of my divs has the class "wrong" and if so it shows the jQuery UI dialog box. However i want to extend the code so that it checks those divs and if there are any that are empty it should not show the dialog box.
I've looked around and some people are suggesting using children().length > 0 to accomplish this, but I'm not sure how to write this with my code.
js:
$("#run").click(function() {
if ($("[id^='Drop']").hasClass("wrong")) {
$("#dialog1").dialog("open");
}
});
The following selectors could be used to test if an element is empty or not:
:empty matches elements that have no children (thus, empty)+
:parent matches elements that have children+
Now, rephrasing your statement:
... so that it checks those wrong divs and if
there are any that are empty they are all full it should
not show the dialog box.
You would write:
var $allWrong = $("id[^='Drop'].wrong"),
$notEmpty = $wrong.filter(":parent");
if ($allWrong.length && $allWrong === $notEmpty) {
// show dialog
}
+ Text nodes are counted when counting children. <span> </span> contains a text node which contains a whitespace. Therefore it matches :parent and does not match :empty.
The logic consists of two parts:
Finding elements with id property starting with "Drop" and having the .wrong class.
Checking whether any of those elements are empty.
To do this, I'm saving the first step in an intermediate variable, before doing the final condition:
var $wrongFields = $('[id^="Drop"].wrong');
if ($wrongFields.length && !$wrongFields.filter(':empty').length) {
// at least one field exists with:
// - id starting with "Drop"
// - class of "wrong"
// and none of those fields are empty
$("#dialog1").dialog("open");
}
Demo
This would also work
$("#run").click(function(){
if ($("[id^='Drop']").hasClass("wrong") && $("[id^='Drop'].wrong:empty").length ) {
$( "#dialog1" ).dialog( "open" );
}
});
I've got a problem that I can't figure out and was wondering if you good people could help out? I'm building a filter system that uses data options on the tags.
The nav elements add to an array when pressed and take that option out
of the array when pressed again.
You may notice that the first set allows for combination and the date range doesn't. This is intentional. My problem lies with asking the script to show the elements in the #container that match the data tag when pressed - I want to show the li elements within #container that match the data-season="" or the data-date="".
in the seasons script this is my problematic piece of script....
if (typeof $("#container li").data('season' == showseason ) )
{
$(this).show();
}
I've tried various ways but I'm now just going in loops getting more confused with each attempt. HELP :)
Jsfiddle Demo
You should change that if statement. remove the typeof keyword, and compare the data value.
if ($("#container li").data('season') == showseason )
{
// do something here
}
Or better yet, iterate through each of the li within #container and get the data-season value.
$("#container li").each(function(){
var season = $(this).data("season");
if(season == showseason)
$(this).show();
else
$(this).hide();
});
Please refer to the updated fiddle: http://jsfiddle.net/b2eh2w07/11/
I'm using jQuery to get a string from a search field and hide items that don't match. It loops through a list of divs and uses $(this).fadeOut(); to hide those elements.
This works very well, but I would like to add further searches within that search. I've added an extra search field, but of course it doesn't inherit the fade outs from the previous search and it starts again from the beginning.
I need a way to specify to the searches to only search visible elements of the list. This needs to work in reverse order as users might enter in the the second search field, then the first.
Here's a JSFiddle of my code illustrating the problem
JSFiddle Here
And a code snippet of one search function
$("#filter").keyup(function () {
var filter = $(this).val(),
count = 0;
$(".records2 div").each(function () {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
});
You can use:
element.is(":visible")
To test if a given element is visible or not.
So in your case you'd just do:
if ($this).is(":visible")); {count++;}
Or you can add ":visible" to the end of your selectors to only pick the visible items:
$(".someselector div:visible").each(...);
Edit: I just checked the jquery documentation. You get better performance if you do:
$(".someselector div").filter(":visible").each(...);
This is because :visible isn't part of the CSS specification so jquery has to implement it manually.
I've got a slideshow that's manually controlled with previous and next buttons. It works fine, but using insertBefore and insertAfter feels sloppy, so I'd like to explore some other methods. Instead, I'm thinking "if this is the last image, go back to the first + the opposite for going backwards.
Here's my code, but I'm not getting the desired result when it hits the last image (where it should fade in the first and start all over.
Syntaxual? if (slide == $('.z:last')) looks fishy to me.
Test site: http://brantley.dhut.ch/
Thanks!
Here's my JavaScript:
$('#next').click(function() {
var slide = $('.z:visible'),
next = $('.z:visible').next();
slide.fadeOut(400, function() {
slide.removeClass('active');
if (slide == $('.z:last')) {
$('.z:first').addClass('active');
bromance();
$('.z:first').fadeIn(400);
} else {
next.addClass('active');
bromance();
next.fadeIn(400);
}
});
return false;
});
Try this:
if (slide[0] == $('.z:last')[0]) { ...
jQuery doesn't return a reference to a DOM element directly, it returns an object that is array-like, where each array element is a DOM element matching the selector you used. This means comparing the results from two selectors is comparing two different array-like objects which isn't ever going to match even if they contain the same elements. Compare the first element in each array instead (because in your case you're expecting only one element anyway).
why don't you use slide = $('.active') and try :first-child instead of :first
next = $('.z:visible').next();
check the below condition and specify the next image accordingly.
if($('.z:last')){
next = $(".z:first")
}
else{
next = $('.z:visible').next();
}
I would compare element ids for equality.
Change if (slide == $('.z:last')) to if (slide.attr('id') === $('.z:last').attr('id')).
Or, you can test to see if the last slide is visible like so:
if ($('.z:last:visible')) {
// last slide is visible
}