how to find string with number selector in jquery - javascript

I want to know how to find the class along with number digits, for instance, the class maybe like this: .test_ico1, .test_ico2, .test_ico3, .test_ico4.
Jquery
$('.test_ico' + '/[0-9]/').each(function(){
var a = window.getComputedStyle(this,':after').content;
$(this).parent().hover(function(){
$(this).attr('data-content', a);
});
});

You can use ^(starts with) symbol.
Also it's called Attribute Starts With Selector
$('[class^="test_ico"]').each(function(){
Short example:
$('[class^="myClass"]').each(function(){
$(this).addClass('active');
});
.active{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="myClass1">1</li>
<li class="myClass2">2</li>
<li class="Class3">3</li>
</ul>

Try attribute contains selector [attribute*=value]
$('[class*="test_ico"]').each(function(){
var a = window.getComputedStyle(this,':after').content;
$(this).parent().hover(function(){
$(this).attr('data-content', a);
});
});
Note: Prefer this over #Alexandru's answer only if your element has multiple classes.

You can use the starts with attribute selector, no need for a each function, you need the hover event over the test_ico not the parent
$('[class^="test_ico"]').hover(function() {
var a = window.getComputedStyle(this,':after').content;
$(this).parent().attr('data-content', a);
});

Related

Grab the class from an element JS

I have an li tag that looks like:
<li class="active_fix generator" data-selected="1"></li>
Within my onClick event I have a console.log on $(this) and I get back
[li.active_fix generator] - among a few things in my console window.
How can I grab the class. So for example save the classname active_fix as a var but not the second class name generator.
$('active_fix').on('click', function() {
console.log($(this));
})
Thanks.
You can split the class name,
$(this).attr("class").split(" ")[0]
We are getting the class name using attr and splitting the string by a space, then we are getting the first key in the array.
Reading Material
attr
split
Try to use .attr("attributeName") to get its attribute(any),
$('.active_fix').on('click', function() {
console.log($(this).attr("class").split(" ")[0]); //Jquery
console.log(this.className.split(" ")[0]); //Pure Javascript
});
this.className will return a string "active_fix generator". Basically multiple classes to an element can be applied by adding a space as a delimiter. So you can split that returned string with space to get array of class names. And from that array [0] will get you the first class.
You can use classList to retrieve a list of the elemnent classes:
$('.active_fix').on('click', function() {
alert(this.classList[0]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="active_fix generator" data-selected="1">...</li>
$('.active_fix').on('click', function() {
alert($(this).attr("class").split(" ")[0]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="active_fix generator" data-selected="1"></li>
DevJunior Try This , It will help you
$('.active_fix').on('click', function() {
console.log($('.active_fix').attr('class').split(' ')[0]);
});
$('.active_fix').on('click', function() {
alert(this.classList[0]);
})

Better way to Find which element has a specific class from an array of elements

Suppose I have a List like the following
<ul>
<li id="slide-a" class="slide-li active-slide"><a href="#" >A</a></li>
<li id="slide-b" class="slide-li"><a href="#" >B</a></li>
<li id="slide-c" class="slide-li"><a href="#" >C</a></li
</ul>
Now , using Jquery I wanna Find out which Element has the class 'active-class'. One way would to have a nested if statement something like this:
if($("#slide-a").hasClass('active-slide'))
{
active = 'slide-a';
}
else
{
if($("#slide-b").hasClass('active-slide'))
{
active = 'slide-b';
}
else
{
if($("#slide-c").hasClass('active-slide'))
{
active = 'slide-c';
}
}
}
My question is if there exists any way to optimize the code above. Is there a generic way to achieve this such that even if I add 10 more li's in the ul the code just works fine without any modification.
Maybe just
var active = $(".active-slide").attr("id");
Demo
Use Attribute starts with selector and .each(). Try this:
$(document).ready(function(){
$('li[id^=slide]').each(function(){
if($(this).hasClass('active-slide'))
alert($(this).attr('id'));
});
});
DEMO
If you have more than one li with classactive-slide use this:
$(document).ready(function(){
var idVal = [];
$('li[id^=slide]').each(function(){
if($(this).hasClass('active-slide'))
idVal.push($(this).attr('id'));
});
console.log(idVal);
});
DEMO
You could a use jQuery $.each() on the ul to iterate through.
fiddle coming in a second.

Copy div class from the clicked item and insert into another div

I currently have a list of <li>'s. Each <li> will have a color class defined, example: .color-blue, .color-red, .color-green - like so:
<ul id="listings">
<li class="layer block color-blue" id="item-1"></li>
<li class="layer block color-red" id="item-2"></li>
<li class="layer block color-green" id="item-3"></li>
</ul>
How do I copy/get the color class of the specific <li> item that is clicked?
I have my click listener in place and also know how to get the <li "id"> however not sure on the specific class though.
/* Click listener */
document.getElementById("listings").addEventListener("click", function(e) {
//console.log(e.target.id + " was clicked");
});
Something like this:
document.getElementById("listings").addEventListener("click", function(e) {
var el = e.target;
if (el.tagName == "LI") { // Use only li tags
for (i=0; i < el.classList.length; i++) {
if (~el.classList[i].indexOf('color')) {
var color = el.classList[i];
console.log('color class found: '+color);
break;
}
}
}
});
http://jsfiddle.net/bHJ3n/
You can use (jQuery):
$('ul').find('li.layer block color-blue')
Or
$('ul#listings').find('li.layer block color-blue')
Or... you can not use jQuery as that wasn't in the original question and would be wasteful to include unnecessarily.
Here's a solution that works in vanilla JS:
jsFiddle Example
Essentially because you're lumping the colour among the other classes you have to split them into an array and iterate over them until you find the one that starts 'color-'. I would recommend you use a custom attribute instead, like data-color="blue" as that would mean you could just retrieve it with:
e.target.getAttribute('data-color');
Try
document.getElementById("listings").addEventListener("click", function(e) {
alert(e.srcElement.className);
});
DEMO
UPDATE(since it is not working in Firefox as pointed from Sai):
To work also in Firefox try this:
document.getElementById("listings").addEventListener("click", function(e) {
var target = e.target || e.srcElement;
alert(target.className);
});
DEMO2

jQuery, get each value from a list and wrap it with <a href="same value">

I have four lists
<li class='lists'>http://google.com</li>
<li class='lists'>http://facebook.com</li>
<li class='lists'>http://twitter.com</li>
<li class='lists'>http://youtube.com</li>
I want to wrap an a tag around the values of this lists with href= value from the values in the list.
The end result I am trying to achieve is:
<li class='lists'>http://google.com</li>
<li class='lists'>http://facebook.com</li>
<li class='lists'>http://twitter.com</li>
<li class='lists'>http://youtube.com</li>
So far I did with jQuery
$('li.lists').wrapInner('<a class="links"> </a>');
which wraps contents inside li with a tags, but I am little short on logic how to put the links into the a field.
I tried with
$.each($('.links'), function() {
$('.links').attr({'href':$(this).text()});
})
But this changes all the links to the http://youtube.com which is the last link, as you can see in the JSFiddle here
You can continue to use wrapInner. Just use this syntax:
$('li.lists').wrapInner(function () {
return "<a href='" + $(this).text() + "'></a>";
});
jsFiddle example
You're close with your last example. Try this:
$('.lists').each(function() {
var href = $(this).text();
$(this).html($('<a>').attr('href', href).text(href));
});
jsFiddle
Try
$('li.lists').html(function (_, old_html) {
return '' + old_html + '';
});
fiddle Demo
.html()
As this jQuery article mentions, $.each is used for non-JQuery objects while .each() is used for jQuery objects. Since you're setting the href attribute of each tag using the jQuery selector, you'll want to use .each() in such a way to set both the tag with wrapInner and its href:
$('.lists').each(function() {
$(this).wrapInner('<a class="links"> </a>');
$(this).children('a').attr({'href':$(this).text()});
})
jsfiddle example
You should try something like this:
$('.lists').each(function() {
$(this).wrapInner('<a class="links" href="'+$(this).text()+'"> </a>');
});
You could also use the $.each for all li.list and $.append() to append the child element(<a> tag).
Demo
$('li.lists').each((i,el) => {
let text =$(el).text();
$(el).text('');
$(el).append($('<a>').attr('href', text).text(text));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class='lists'>http://google.com</li>
<li class='lists'>http://facebook.com</li>
<li class='lists'>http://twitter.com</li>
<li class='lists'>http://youtube.com</li>

Add Different Style to list tag using jquery/javascript

Is there any ways to add different style class to all li in a ul tag using jquery/javascript/php.
Consider I have a list as follows
<ul><li>a</li><li>b</li><li>c</li><li>d</li><li>e</li></ul>
I would like to add as follows
<ul><li class='cat1'>a</li><li class='cat2'>b</li><li class='cat3'>c</li><li class='cat4'>d</li><li class='cat5'>e</li></ul>
As simple as:
$('ul').children('li').addClass(function (i) {
return 'cat' + (i+1);
});
http://api.jquery.com/addClass/
If you want to set the class, the cheaper way to do it is by using .attr() and the index in its setter function, like this:
$("ul li").attr("class", function(i) {
return "cat" + (i+1);
});
If you aren't setting it and just adding, use .addClass(function(i) instead of .attr("class", function(i).
$('ul').children('li').each(function(i,v){
$(this).addClass('cat'+(i+1));
});

Categories