Develop Reference

JQuery to find LI by text and UL by Class

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');
}

Move Nth element from a div picked in an each loop

Consider the following code:
jQuery(function($)
{
$(document).ready(function()
{
$(".td-block-row").each(function()
{
var item = $(this);
$(".td-block-span4:nth-child(3)").prependTo(item.next());
});
});
});
I am trying to iterate through each .td-block-row div, and pick out the third .td-block-span4 element from it, and then move it to the next .td-block-row
The code I currently have (above) will move every Nth .td-block-span4 rather than just the one within the current div in the each loop. Essentially I am trying to do something like:
$(item ".td-block-span4:nth-child(3)").prependTo(item.next());
This may just be a case of finding out the correct syntax to make use of the item var, or perhaps I am taking a completely the wrong approach.
Any advise here would be appreciated as I have little experience with JS

The problem is you need to query td-block-span4:nth-child(3) relative to the current element(in the each handler). So
$(".td-block-span4:nth-child(3)", this).prependTo(item.next());
//or
$item.find(".td-block-span4:nth-child(3)").prependTo(item.next());

What's a good way to show parts of an element but hide the rest?

I was wanting to have a javascript (jQuery) function that removed everything that didn't have the safe class.
The problem is, if the parent element is hidden, it cannot show the 'safe' part of it.
Is there a simple way to get around this? I'd rather not go in and span all of the elements that need removed.
trimmer = function(element){
x = $(element+' *:not(.safe)');
x.hide();
}
trimmer('section');
Fiddle

var element = 'section';
//finds all non `.safe` elements in `section`s and hides them
$(':not(.safe)', element).hide();
//finds all `.safe` elements in `section`s and shows the `section`s
$('.safe', element).parents(element).show();

Horen was right, it is indeed impossible to show parts of a hidden element.
To make only parts of the text disappear, the non-safe content must be labeled for removal.
$(element).contents().each(function() {
if (this.nodeType == 3)
$(this).wrap('<span class="disappear" />');
});
You can read more about this answer here:
How to add spans to all areas of a node that isn't restricted

JQuery .hide...not hiding

This is probably a simple one but I can't seem to get it to work.
I have the following code:
<ul>
<li class='jSH'>Users: <span>0</span></li>
<li class='jSH'>Cars: <span>1</span></li>
</ul>
Essentially, I am trying to write a function that hides the li if the contents of span == 0. This is the jquery code but it doesn't work for some reason:
if ($('.jSH span').text() == "0")
$(this).closest('li').hide();
alert("should hide");
So, in this case, I get one alert for the first li (because the contents of span == 0), but the li does not hide.
Is there a problem with using 'this' in this case?
Thanks!

You would want to use .each since your current code returns multiple objects and their contents - .each will seperate them into a loop-like process where each individual element will be processed.
Fiddle:http://jsfiddle.net/fEEFq/
Javascript Code:
$('.jSH span').each(function(){
if ($(this).text() == "0"){
$(this).closest('li').hide();
alert("should hide");
}
});

Your problem is in $(this) - this, in the context of jQuery, only works when within a event callback (for example mouseover or click). You should fix that line to:
$('.jSH span').closest('li').hide();
Furthermore, you don't have {} around the body of the if statement. This will cause only the first statement after the if to be executed.

You can use $.filter
$('.jSH').filter(function() {
return $('span',this).text() == "0";
}).hide();

You're referring this to a conditional statement, which will not return your desired results.
Instead:
$('.jSH span').each(function(){
if ($(this).text() == "0"){ // now `this` is referring to every span in the jQuery collection
$(this).closest('li').hide();
}
});
http://api.jquery.com/each/

remove delete button on first set of fields

http://jsfiddle.net/NzbRQ/2/
I allow the user to add multiple rows of fields, but I do not want to include a delete link on the very first row of fields, so they can't delete all the fields.
Also, how do I limit it to only 3 rows of fields?

Try this fiddle: Fiddle
For the first part of hiding the delete on the first row, I called the following on page load:
$(".removeoutcome").hide();
Then to make sure they can't add more than 3 or delete the last one, I've added length checks in your click methods, see:
$('.addoutcome').live('click', function() {
if ($(".outcomegroup").length < 3) {
$('#template').clone().removeAttr('id').insertAfter($(this).closest('.outcomegroup')).find('.minus').show();
renumber();
}
});
$('.removeoutcome').live('click', function() {
if ($(".outcomegroup").length > 1) {
$(this).closest('.outcomegroup').remove();
renumber()
}
});
Also, on a side note, live is deprecated now, so if you're using jQuery 1.7, change these methods to on or if you're pre-1.7, use delegate.

You can just hide the del for first element and limit it to add only 3 more set using the following code
var count = 3;
$('.minus').first().hide();
$('.addoutcome').live('click', function() {
count--;
if(count < 0 )return;
$('#template').clone().removeAttr('id').insertAfter($(this).closest('.outcomegroup')).find('.minus').show();
});
here is the working fiddle http://jsfiddle.net/joycse06/uW9NQ/

Updated: http://jsfiddle.net/NzbRQ/5/
First off, ditch .live. I added the section to give a more specific selector than body, but there's probably something better that you can use in your original DOM.
Just don't remove the last row with some simple logic. Your logic for showing the future "del" link was actually already there! You don't even really need the last-row-removal logic at all since just not displaying "del" is enough, but I was just being thorough.

I don't know why anyone haven't paid close attention to this line:
.find('.minus').show();
where he definitely was un-hiding the del element. In short, the only thing you need to do is add the proper CSS rule:
.minus { display: none; }
and that's it, the first element won't show a del link and the others will.
The limit to three elements simply.
$("[parent element]").on('click', '.addoutcome', function() {
if($('.addoutcome').length > 2) return;
...
});
A better selector [parent selector] is needed and depends totally in your layout. Basically, it is the element that wraps all these elements, the parent element of all of them.