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>
Related
I want to add a hidden class to all li but not to the li which was clicked. How can I do this using jQuery?
<ul class="render-menu">
<li class="font-size">list 1</li>
<li class="font-size">list 2</li>
<li class="font-size">list 3</li>
<li class="font-size">list 4</li>
</ul>
jQuery(".render_menu li").on('click', function() {
alert();
jQuery(".render_menu").not($(this)).parent().addClass('hidden');
});
Firstly note that your class in the HTML is render-menu, yet the JS was using render_menu. You need to make them consistent.
With regard to the issue, you're adding the class to the parent() of the li, ie. the ul, so all the child elements are being affected by the class. To fix this, use siblings() to get all the li elements you require before calling addClass(). Try this:
$(".render-menu li").on('click', function() {
$(this).siblings().addClass('hidden');
});
.hidden { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="render-menu">
<li class="font-size">list 1</li>
<li class="font-size">list 2</li>
<li class="font-size">list 3</li>
<li class="font-size">list 4</li>
</ul>
Change your JS code to below
jQuery(".render_menu li").on('click', function () {
alert();
jQuery(".render_menu li").not($(this)).addClass('hidden');
});
You are comparing ul instead of li to add class
You can try the following
$('.render-menu li').on('click',function(){
$('.render-menu li').removeClass('hidden').not(this).addClass('hidden');
});
.hidden{
color:lightgray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="render-menu">
<li class="font-size">list 1</li>
<li class="font-size">list 2</li>
<li class="font-size">list 3</li>
<li class="font-size">list 4</li>
</ul>
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>
i want to print ul width in tag of ul with the help of jquery
jQuery(document).ready(function($){
var fixmeTop = $('ul').offset().top;
alert($("ul").width());
});
ul li{display:inline-block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>test 1</li>
<li>test 1</li>
<li>test 1</li>
<li>test 1</li>
<li>test 1</li>
</ul>
Assuming I've understood your question correctly, you want to add the value returned from the width() call to a new li tag within the ul. If so you can use the append() method to do this:
jQuery(function($){
var fixmeTop = $('ul').offset().top;
$("ul").append('<li>' + fixmeTop + '</li>');
});
ul li{display:inline-block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>test 1</li>
<li>test 1</li>
<li>test 1</li>
<li>test 1</li>
<li>test 1</li>
</ul>
Want to print width in <ul> tag with the help of jquery.
<ul style="width:250px">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
I've got the following code:
jQuery
$("li").click(function(){
$(this).toggleClass("selected");
$(".selected").each(function(){
$(".items").append(this.text() + ", ");
});
});
html
<ul class='category'>
<h4>Category</h4>
<li class="selected">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li class="selected">Link 4</li>
<li class="selected">Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
<span class="items">Selected Items Appear Here</span>
I'm trying to search the contents of the $(".category") for tags with the .selected class before appending the results to another div.
This is the result I'm hoping for:
<span class="items">Link 1, Link 4, Link 5</span>
However, the this.text() seems to be returning an undefined error.
Any clue as to what I'm doing wrong?
You need to call .text() on a jQuery object, and since this refers to the element (see jQuery docs for .each()), simply wrap this in $() to make a new jQuery object of the current element in the loop.
example:
$(".items").append($(this).text() + ", ");
in saying this, you'd probably be better off simply using .innerHTML unless you want the jQuery object for other reasons.
example:
$(".items").append(this.innerHTML + ", ");
You can try something like
var $lis = $(".category li").click(function() {
//toggle the current li's selected class
$(this).toggleClass("selected");
setItems();
});
//set the initial value
setItems();
function setItems() {
//get the texts of all selected `li`'s text to an array
var texts = $lis.filter(".selected").map(function() {
return $(this).text();
}).get();
//set the array values to the `.items` element
$('.items').text(texts.join())
}
.selected {
background-color: lightgrey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h4>Category</h4>
<ul class='category'>
<li class="selected">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li class="selected">Link 4</li>
<li class="selected">Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
<span class="items">Selected Items Appear Here</span>
js fiddle example for you
**Jquery**
$(function () {
$("li").click(function () {
$(this).toggleClass("selected");
appendItems();
});
function appendItems() {
var selecteditem = "", lement, appementElement = ", ";
lement = $(".selected").size();
$(".selected").each(function (index) {
if ((lement - 1) == index) {
appementElement = "";
}
selecteditem = selecteditem + ($(this).text() + appementElement);
});
$(".items").html("").append(selecteditem);
}
});
html
<ul class='category'>
<h4>
Category</h4>
<li class="selected">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li class="selected">Link 4</li>
<li class="selected">Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
<h3>
<span class="items"></span>
</h3>
i hope this may hep you
I think you confused Javascript's this with jQuery's $(this). $() is the jQuery constructor function. this is a reference to the DOM element of invocation.
Please find the working code below:
$("li").click(function(){
$(this).toggleClass("selected");
$(".selected").each(function(){
$(".items").append($(this).text() + ", ");
});
});
$(".selected").each(function(){
$(".items").append($(this).text() + ", ");
});
.selected{
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='category'>
<h4>Category</h4>
<li class="selected">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li class="selected">Link 4</li>
<li class="selected">Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
<span class="items">Selected Items Appear Here</span>
Read up on this: jQuery $(this) vs Javascript this
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