jQuery remove li's dynamically - javascript

Hello i got a ul list like this:
<ul><li>Test</li><li>Test</li></ul>
Now im appending from an array like this:
var array = new Array("Element1", "Element2");
var length = array.length;
I can only have 2 lines in my UL list (This is much more because i get information from a database)
So now the array has a length of two, then i use for to get the result but now i need it do delete the first rows, so if i add 12 li's i need it do delete the 12 first li's from the list, or if i add 2 li's i need it do delete the 2 first li's.
Anyone got a clue? Im kinda stuck right now

You can use .slice() to get a range of the elements matching a selector.
$("li").slice(0, -2).remove();
Using a negative number as the end of the range counts from the end of the collection.

Related

How can I check length of the uI, Cypress test is yielding only 1

The below(highlight in green) is a dropdown, it has about 10 options. When I try cy.get(element) it yields only 1.
Structure.
Console SC
I am trying to use something like
cy.get(element) .should('have.length', '9')
The <ul> is parent of the 10 <li> underneath.
If you select ul, use children() to count the options.
cy.get('ul[data-cy="offerBreakUpJobTitleAndIdFilterComboboxOptions"]')
.children('li')
.should('have.length', '10')
I notice also you have multiple elements using the testing id of
data-cy="offerBreakUpJobTitleAndIdFilterComboboxOptions"
This might give you trouble selecting the element you want.
You can do this. You have to get the li selector to get the length as 9.
cy.get('li[data-cy*="offerBreakUpJobTitle"]').should('have.length', 9)
If you have just one list on the webpage, you can also do like this:
cy.get('li').should('have.length', 9)

jQuery counter and adding a class but not to the first two?

I'm checking list items I have and if there are more than two then I add a class. This works fine but I want the class to start adding after the first two list items. I am not sure how to do that part that excludes adding the class to the first two. Here is my code:
$(document).ready(function() {
//Checking how many time the class appears
var numItems = $('ul.singleMagazine li').length;
if (numItems > 2) {
alert(numItems);
//Want to add this class but not to the first two - exclude first two list items and then add it to the rest. How to do it?
$('ul.singleMagazine li').addClass("newClass");
}
});
How I would do the excluding part?
The li elements should be siblings, so you can use the gt() selector:
$('ul.singleMagazine li:gt(1)').addClass("newClass");
Also note that the length check is redundant as if there's less than two items the above won't do anything anyway.
You can use gt selector. https://api.jquery.com/gt-selector/
$('ul.singleMagazine li:gt(1)').addClass("newClass");
This will add the class only to the li's which are greater than 1. Note here that the indexing starts from 0.

Looking to get index of first matched element within array

I'm looking to get index position of matched element within repeater and would like to know how I can find.
List of books below
element.all(by.repeater('books'))
within those rows, some rows will have below element
element(by.css('[ng-click="download"]')
and I want to do following
find element of download button (more than 1)
get index position of first download button (so I can do other stuffs later with .get(3) for specific row)
So here what I have tried.
element.all(by.css('some-css')).first().element(by.tagName('tag-within-css')).get(index);
element.all(by.css('some-css')).get(index).element(by.tagName('tag-within-css'));
Finding Sub-Elements - Protractor locators guide
some error such as index not defined or no method of 'get'.
Thanks.
I think you don't need to operate using element positions/indexes inside the repeater. Instead, find download buttons and operate with the current row using context/element specific element searches by chaining element and element.all:
var books = element.all(by.repeater('books'));
var downloadButtons = books.all(by.css('[ng-click="download"]'));
var firstDownloadButton = downloadButtons.first();
// here is how you can, for example, get the next div element to the download button
var nextElement = firstDownloadButton.element(by.xpath('following-sibling::div'));

Jquery accessing every list item by its index

I am following a beginner video tutorial for Jquery and just went through this code: (inside .ready() )
$('ul li ').each(function(e){
$this().css{background' ,'red'}
$this().append(e);
});
now e prints each li index , can someone please explain me how does it get index for each item as it's not a loop .
Well, the .each() function is a loop. It almost literally says "For Each item that has the name 'ul li', do something."
The letter 'e' inside the parantheses is your actual index number. When you use an .each loop, the function gathers the number of whatever it's looking at and moves on until there are no more.
To simply show the number of the index, you can say:
$('ul li').each(function(i){ //I like to use the letter 'i' which more literally stands for 'index'
console.log(i);
});
This will show in your console as:
0
1
2
3
4
5
Assuming you have six of those elements.
Now, your use of $this means nothing. When using it properly it's written as $(this) which means "this element" since we're in a function that goes through each list element, it will take the list element it is currently looking at, then do whatever you want.
If you'd like the background color to be red of all of your list elements (like it seems you want to do) you would write:
$('ul li').each(function(i){
$(this).css({"background": "red"});
});
I'm not sure what you're trying to do with the .append function. By doing this, you're literally adding a list element to your list element for every list element!
Can you explain what you are trying to accomplish?
UPDATE
As your title says "Accessing every list item by its index," If you would like to access a particular list item, and not all of them, you can use the function .eq(). Let's say you have 6 list elements and you want the fourth one to have a red background. All you would have to do it this:
$('ul li').eq(3).css({"background":"red"});
Remember, index numbers start at zero, so the fourth one would be #3. (but of course, this would be faster and simpler in CSS!)
Actually, .each() is a loop/iterator. It will iterate over each of the elements that match. Eg: all the ul lis.
It will run through the code for every one it matches, and the DOM element will be accessible with $(this)
See the docs: http://api.jquery.com/jquery.each/

Jquery - Get xth element

For example, I have a div with an id (lets say "the_div"). This div contains an unordered list, and this list has 5 items in it.
How would I add a class to the third list item, without any of the list items having a class attached to them?
Edit: Even better, how would I change the list item text to equal what number element it was?
Thanks.
Or...
$('#the_div ul li:eq(2)').addClass('className');
You can combine the selectors together - if you prefer :)
For your first problem, you can use eq, which is 0 based:
$('ul li', '#thediv').eq(2).addClass('whatever'); // add class to 3rd item
For your second problem, you can use each to iterate through all the list items. The callback function passes an argument containing the index of the current element in the set:
$('ul li', '#thediv').each(function(i) {
$(this).text(i); // update each list item with its index, 0 based.
});

Categories