Copy element's attributes to other element in javascript loop - javascript

I have a problem in loop js. I would like to copy data-icon value from .nav class to li in #item-control. Is there anyway easy way to solve it with jquery?
<div id="nav-container">
<ul class="nav">
<li data-icon="images/1.png">Item 1</li>
<li data-icon="images/2.png">Item 2</li>
<li data-icon="images/3.png">Item 3</li>
</ul>
</div>
<div id="item-control">
<li>Item Control 1</li>
<li>Item Control 2</li>
<li>Item Control 3</li>
</div>
What I've tried:
$(document).ready(function () {
var a = 1;
$('#container #nav-container ul.nav li').each(function () {
var item_control = $(this).parent().parent().parent().find('#item-control li');
item_control.addClass('item' + a); //this is what I tried before adding data-icon attributes to #item-control li
a++;
});
});

var $navItems = $('.nav li'),
$itemControlItems = $('#item-control li');
$.each($navItems, function(index, el) {
$($itemControlItems[index]).data('icon', $(el).data('icon'));
});
Fiddle

Related

JS - Add Class to link that contains a certain word

I'm trying to use Jquery to add a class to all links which contain a certain keyword "keyword".
Any help would be much appreciated
$(document).ready(function(){
$('.list').each(function(){
var $this = $(this);
if($this.text().indexOf('Keyword') > -1)
$this.closest('.list a').addClass('selected-link')
})
})
.selected-link {
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
<li>Keyword</li>
<li>Link 1</li>
<li>Link 2</li>
</ul>
You need find a inside li tag as $this.find('a'), $this.text() is content of li tag
$(document).ready(function(){
$('.list').each(function(){
var $this = $(this);
if($this.find('a').text().indexOf('Keyword') > -1)
$this.find('a').addClass('selected-link')
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
<li>Keyword</li>
<li>Link 1</li>
<li>Link 2</li>
</ul>
Iterate over the .list as instead - the <a>s which are descendants from the .list:
$('.list a').each(function() {
var $this = $(this);
if ($this.text().indexOf('Keyword') > -1) {
$this.addClass('selected-link');
}
});
.selected-link {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
<li>Keyword</li>
<li>Link 1</li>
<li>Link 2</li>
</ul>
Note that there's no need for a big library like jQuery for something this trivial, this is easy to accomplish in vanilla JS:
for (const a of document.querySelectorAll('.list a')) {
if (a.textContent.includes('Keyword')) {
a.classList.add('selected-link');
}
}
.selected-link {
color: red;
}
<ul class="list">
<li>Keyword</li>
<li>Link 1</li>
<li>Link 2</li>
</ul>
I suppose you are looking for this ?
$(document).ready(function()
{
document.querySelectorAll('.list a').forEach(el=>
{
if (/Keyword/.test(el.textContent) )
{ el.classList.add('selected-link') }
})
})
.selected-link {
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
<li>Keyword</li>
<li>Link 1</li>
<li>Link 2</li>
</ul>

How to check if the clicked element is before or after the current active element

I have a list item, the first one already have .active class.
When I click to other list item, the .active class move to that clicked element.
But the problem is, I can't detect if item that I clicked before or after the previous .active element.
Here's the script
$(document).ready(function(){
var $li = $("li");
$li.each(function(){
$(this).click(function(){
$li.removeClass("active");
$(this).addClass("active");
if($("li.active").next($(this))){
$("span").text("after clicked element");
} else {
$("span").text("before clicked element");
}
})
})
})
li.active {
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active">Check 1</li>
<li>Check 2</li>
<li>Check 3</li>
<li>Check 4</li>
</ul>
<span></span>
Here's the fiddle
To achieve this you can check the index() of the relevant elements in your if statement. Also note that the each() statement is redundant. Try this:
$(document).ready(function() {
$("li").click(function() {
var activeIndex = $('li.active').removeClass('active').index();
var thisIndex = $(this).addClass('active').index();
if (activeIndex < thisIndex) {
$("span").text("after active element");
} else if (activeIndex > thisIndex) {
$("span").text("before active element");
} else {
$('span').text('same element');
}
})
})
li.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active">Check 1</li>
<li>Check 2</li>
<li>Check 3</li>
<li>Check 4</li>
</ul>
<span></span>
You can try with index if understand you correctly this will solve issue:-
$(document).ready(function() {
var $li = $("li");
$li.each(function() {
$(this).click(function() {
if ($("li.active").index()<$(this).index()) {
$("span").text("after clicked element");
} else {
$("span").text("before clicked element");
}
$li.removeClass("active");
$(this).addClass("active");
})
})
})
li.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active">Check 1</li>
<li>Check 2</li>
<li>Check 3</li>
<li>Check 4</li>
</ul>
<span></span>
You could save the index of recently clicked element and compare it with the previous one.
$(document).ready(function(){
var index = 0;
$('li').click(function(){
$('li').removeClass("active");
$(this).addClass("active");
var res = $("li.active").index() > index ? 'after' : $("li.active").index() == index ? 'same' : 'before';
index = $(this).index();
console.log(res);
})
})
li.active {
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active">Check 1</li>
<li>Check 2</li>
<li>Check 3</li>
<li>Check 4</li>
</ul>
<span></span>

How to store list items within an array with jQuery

I want to store all list items of several list of the same class within an array.
for exemple:
<ul class="myList">
<li>item 1</li>
<li>item 2</li>
</ul>
<ul class="myList">
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
Script file:
var arr_list_items = [];
$('ul.myList').each(function(){
while( !$(this).empty() ) {
list_item = $(this).find('li:first');
arr_list_items.push( list_item );
list_item.remove();
}
});
The list items are removed, but the array returns empty. Why?
var array = [];
$('.myList li').each(function(i, li) {
array.push($(li));
});
No need for any complex logic.
You can use the .get() method to retrieve an array of the elements matched by the jQuery object:
Example Here
var arr_list_items = $('.myList li').remove().get();
console.log(arr_list_items);
// [li, li, li, li, li]
Alternatively, you could also use the .map() method:
Example Here
var arr_list_items = $('.myList li').remove().map(function () {
return this;
}).get();
var arr_list_items = [];
$('ul.myList').each(function (i,n) {
$(n).find('li').each(function (j, m) {
arr_list_items.push(m);
}).remove();
});
for (var i = 0; i < arr_list_items.length; i++) {
console.info(arr_list_items[i]);
}
Because I am poor in English, so I can not explain the code,but I think you can understand it
var arr_list_items = [];
$('ul.myList').each(function(){
$(this).find('li').each(function(){
arr_list_items.push(this);
$(this).remove();
});
});
console.info(arr_list_items);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myList">
<li>item 1</li>
<li>item 2</li>
</ul>
<ul class="myList">
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>

Progressive reveal with jQuery

I have nested unordered list.
<ul id="catalogue">
<li>List
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 1.1</li>
<li>Item 1.2
<ul>
<li>Item 1.2.1</li>
<li>Item 1.2.2
<ul>
<li>Item 1.2.2.1</li>
</ul>
</li>
<li>Item 1.2.3</li>
</ul>
</li>
<li>Item 1.3</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</li>
</ul>
At the beginning only the very top level shows, but if you click on each LI, if there's a child UL in it, it should display the next lever, and so on. If you click on the same LI again, the level below should become hidden.
$(document).ready(function () {
$('#catalogue li').each(function () {
$(this).contents().first().wrap("<span/>")
});
$('#catalogue li > span').addClass('brd');
$('ul').hide();
$('#catalogue').show();
$('#catalogue li').click(function () {
var nxt = $(this).children('ul:first')
if ($(nxt).is(":visible")) {
$(nxt).slideUp();
} else {
$(nxt).slideDown();
}
$(this).parent().show();
});
});
If a user clicks on a sibling LI and it has a child UL, that UL should show but any sibling's ones should close.
You need to stop the event from propagating to the parent. Clicking on each li will invoke its own click handler and the event will propagate to its parent li invoke its handler and so on. So you can just stop it at one level by using event.stopPropagation(). And you can use slideToggle to toggle the current state of the element.
Try:
$('#tree li').click(function (e) {
e.stopPropagation();
$(this).children('ul:first').slideToggle();
});
Demo
And if you want to slide up while clicked on its sibling then,
$('#tree li').click(function (e) {
e.stopPropagation();
var $this = $(this);
$this.children('ul:first').slideToggle().end()
.siblings().children('ul:visible').slideUp();
//Code Broken down
//$this.children('ul:first').slideToggle();
//$this.siblings().children('ul:visible').slideUp();
});
Demo

Navigation Menu using jQuery (from jQuery Cookbook)

The menu is supposed to show sub-items upon hover. Here's the code (from http://docs.jquery.com/Cookbook/Navigation):
<ul id="menu">
<li class="menu">Sub 1
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>
</li>
<li class="menu">Sub 2
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>
</li>
</ul>
jQuery code:
$(document).ready(function() {
var toggle = function(direction, display) {
return function() {
var self = this;
var ul = $("ul", this);
if( ul.css("display") == display && !self["block" + direction] ) {
self["block" + direction] = true;
ul["slide" + direction]("slow", function() {
self["block" + direction] = false;
});
}
};
}
$("li.menu").hover(toggle("Down", "none"), toggle("Up", "block"));
$("li.menu ul").hide();
});
What is this in the toggle function above? How is the code working? What is being selected by $("ul", this); ?
The "this" refers to the jQuery object $("li.menu") - when the hover method call applies the toggle function to that object. $("ul", this) selects ul elements that are children of the context provided in the second argument ("this"), thus it selects the ul elements nested within the li.menu elements. Hopefully that makes the hover/toggle functions make sense.

Categories

Resources