JQuery to find LI by text and UL by Class - javascript

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

Related

How to hide a parent by searching for content within a child using jQuery

I'm trying to hide the parent of something I'm using find to check the content of. Can I refer to the following as "this"?
jQuery('.input-box').find('#preferred-shipping .ps-text').text().trim()
and then use it like so?
if(jQuery('.input-box').find('#preferred-shipping .ps-text').text().trim()==='You have backordered items in your cart, please choose a shipping status.') {
jQuery(this).closest('.input-box').hide();
jQuery(this).parent().hide();
}
Here's the JS Fiddle I created to test it: https://jsfiddle.net/Realto619/qrfytqu9/
$('.input-box').filter(function(){
return $(this).find('#preferred-shipping .ps-text').text().trim()==='You have backordered items in your cart, please choose a shipping status.';
}).hide();
If the filter doesn't match anything, the hide will be skipped.

Jquery Mobile Filter system, can't hide multiple divs

I'm making a Jquery Mobile app and have a page with 15 or so divs with class', I'm trying to make a filtering system so that when you press a button some of these divs disappear depending on the class. There are 3 groups and they all have an "all" class to display everything making 4 classes total.
Unfortunately most of the js I use never works even if I set up a jsfiddle for jquery mobile when I put it into my app it doesn't seem to work.
I wanted to use
function show(target) {
document.getElementsByClassName(target).style.display = 'block';
}
function hide(target) {
document.getElementsByClassName(target).style.display = 'none';
}
But that doesn't work whereas document.getElementById seems to work fine. However obviously I can only hide/show 1 div per button..
I was wondering if there was a work around for this or something completely different I should try?
Here's a jsfiddle of what I have: http://jsfiddle.net/tzcx7gky/
It's completely broken in jsfiddle but it works fine in my code, which is odd..
You don't need seperate hide - show functions. The following would take care of all.
$('a').on("click",function()
{
$("#scroll_content div").hide(); // initially hide all divs inside the element with id = scroll_content
var target = $(this).text().toLowerCase(); // find the class you wish to show using the text of the a tag clicked ( I would prefer using data-attr in this case but I'll leave the choice upto you.
$("." + target).show(); // show the element with the class target.
});
Working example : http://jsfiddle.net/tzcx7gky/2/
getElementsByClassName returns an array of elements. So you would have to itterate over the array and then set the display property on each one. Since you are already using jQuery you can use it to do it for all the elements.
function show(target) {
/* jQuery uses CSS selectors to grab elements
so we have to prefix the target with "."
Alternativley we could pass in the whole selector in the
function so we don't have to prefix it e.g.
show('.all')
$(target).show();
*/
$("."+target).show();
}
function hide(target) {
$("."+target).hide();
}
Here is the same implementation in the vanilla js framework
function show(target) {
var elements = document.getElementsByClassName(target);
elements.forEach(function(element){element.style.display = 'block';});
}
function hide(target) {
var elements = document.getElementsByClassName(target);
elements.forEach(function(element){element.style.display = 'none';});
}
note that getElementById returns a single element since id's are unique and there should only be one element with one id on the page. That is why it was working for you.

Add Class to Array of ID's in Javascript

I am using .map to get an array of element IDs (this is named 'ids') that have a 'default-highlight' class. After removing that class on mouseenter, I want to return that class to those specific id's (basically, leave it how I found it).
Two things are causing me trouble right now:
When I dynamically add data-ids to the td elements and then use those data-ids to create the array of 'ids' my mouseenter stops adding the 'HIGHLIGHT' class (NO idea why this is happening)
On mouseleave I can't loop through the 'ids' and return the 'default-highlight' class to the elements they originally were on
I figure I should be using something like this, but it obviously isn't working:
$.each(ids, function() {
$(this).addClass('default-highlight');
});
I have tried a number of things, but keep coming up short. I am attaching a link to a codepen.io where I use data-ids that are being dynamically added to the table (this one the mouseenter doesn't work) and a codepen one where I am using regular IDs for the default highlight and everything appears to work like it is supposed to be (It isn't, since I want to be using the dynamically generated data-ids and then the subsequently produced array to reapply those classes).
Both of these codepens have a gif at top showing how the interaction should work.
If anything is unclear, please let me know. Thanks for reading!
You need to add # before id selector
$.each(ids, function() {
$('#'+this).addClass('default-highlight');
});
or you can use common selector by the help of map() and join()
$(ids.map(function(i, v) {
return '#' + v;
}).join()).addClass('default-highlight');
or you can add # when getting the id's and then you just need to join them
var ids = $('.default-highlight').map(function(i) {
return '#'+$(this).data('id');
}).get();
...
...
...
$(ids.join()).addClass('default-highlight');
It seems like storing the IDs and using those is overkill when you can store a reference to the jQuery element directly:
$highlightCells = $('.default-highlight').removeClass('default-highlight')
And later give the class back:
$highlightCells.addClass('default-highlight')
Here's a codepen fork: http://codepen.io/anon/pen/ZbOvZR?editors=101
Use this way:
$.each(ids, function() {
$("#" + this).addClass('default-highlight');
});

find siblings and addclass using javascript only

I want to add class on siblings of target Element in javascript. I have done this before using jquery which is pretty easy. But In my current organization they do not use jquery and I need to done with javascript and that is very difficult for me.
I have write some code that will attached a click function to an matched element but afterward I am not getting any login to how to make it happend. fiddle
var elements= document.getElementsByTagName('*'),i;
i=0;
while(elements[i]){
if(elements[i].className=='c'){
elements[i].addEventListener('click',function(){
this.jsSiblings().jsAddClass('newClass')
})
}
i++
}
Array.prototype.jsSiblings= function(){
//code
}
Array.prototype.jsAddClass=function(){
//code
}
You can use the base function in JS to add a class, element.classList.add("anotherclass"); (from MDN) and here you will find out about siblings without jQuery : How to find all Siblings of currently selected object

javascript trouble with the setattributefunction

I use a form that display some div depending on which option you click of the radio button.
The thing is that the div is set to be none displayed, except if I select an option.
So I added the following function in order to make sure that if the div is displayed it will have th form havin the required property.
SO I give this function:
<script type="text/javascript">
function addattribute()
{
if (document.getElementById('montant').style.display == "block")
{
document.getElementsByName('montant_creance').setAttribute('required');
document.getElementsByName('condition2').setAttribute('required');
}
if (document.getElementById('montant').style.display == "none")
{
document.getElementsByName('montant_creance').setAttribute('required','false');
document.getElementsByName('condition2').setAttribute('required','false');
}
}
</script>
But It say to me in the console:
Uncaught TypeError: Object #<NodeList> has no method 'setAttribute'
I really do not know how to find an issue.
Receive all my utmost Respect.
Kind Regards.
SP.
getElementsByName return a collection of elements, so you have to write e.g.
document.getElementsByName('montant_creance')[0].setAttribute('required');
every time you use this method (or similar methods, like getElementsByTagName, getElementsByClassName...) using the right index
the setAttribute takes 2 parameters name and value:
setAttribute('name','value');

Categories

Resources