is there a better way to write this simple on click script?
as you can she there is a consistent number in each block.
instead of duplicating it another 10 times for 10 different list item, is there a better way?
the content is not in a child of the li. so i cant club all of them with (this)
heres the thing im working on:
$( '.artist_li1' ).click(function() {
$( '.artist_content' ).removeClass( "active" );
$( '.artist_content1' ).addClass( "active" );
});
$( '.artist_li2' ).click(function() {
$( '.artist_content' ).removeClass( "active" );
$( '.artist_content2' ).addClass( "active" );
});
$( '.artist_li3' ).click(function() {
$( '.artist_content' ).removeClass( "active" );
$( '.artist_content3' ).addClass.addClass( "active" );
});
and so on....
You can use ^ attribute selector in jQuery like this:
$( '[class^=artist_li]' ).click(function() {
$( '.artist_content' ).removeClass( "active" );
$( '.artist_content1' ).addClass( "active" );
});
[class^=artist_li] matches elements with class attribute starting with artist_li
UPDATE: Use jQuery instead of $ as according to your provided link, you're using jQuery v 1.12
For more help, see code block below
$(function(){
$("[class^=artist_li]").on('click', function() {
alert($(this).text());
});
});
li {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li class="artist_li1">Click 1</li>
<li class="artist_li2">Click 2</li>
<li class="artist_li3">Click 3</li>
<li class="artist_li4">Click 4</li>
</ul>
</div>
Hope this helps!
You can do for loop:
for(var i = 1; i < 3; i++) {
(function(index) {
$( '.artist_li'+index ).click(function() {
$( '.artist_content' ).removeClass( "active" );
$( '.artist_content'+index ).addClass( "active" );
});
}(i));
}
To give a better / more efficient answer it would be helpful to see your HTML. But I digress, and will suggest the following -
Assuming some HTML structure as follows - You can remove the need for indexing if you work using DOM traversal relative to the clicked element
$(document).on('click', '.artist_li', function(){
$('.artist_content').removeClass('active');
//this will find the child div inside the list element that
//was just clicked. Removing the need for indexing
$(this).children('.artist_content').addClass('active');
});
.active {
color: red;
}
li {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul> <!-- Adding extra class artist_li to illustrate various method -->
<li class="artist_li1 artist_li">
<div class="artist_content artist_content1 active">Content 1</div>
</li>
<li class="artist_li1 artist_li">
<div class="artist_content artist_content2">Content 2</div>
</li>
<li class="artist_li1 artist_li">
<div class="artist_content artist_content3">Content 3</div>
</li>
</ul>
Related
My code:
<ul class="nav" id="shop">
<li class="active">
<a>Type</a>
<ul id="category" class="nav1">
<li ><a>Bulb</a></li>
<li><a>Focus light</a></li>
<li><a>Downlight</a></li>
<li><a>Touch</a></li>
</ul>
</li>
<li><a>Engery</a></li>
<li><a>Link 3</a></li>
</ul>
Javascript
$(function() {
$( ' ul#shop li' ).on( 'click', function() {
$( this ).parent().find( 'li.active' ).removeClass( 'active' );
$( this ).addClass( 'active' );
});
$( ' ul#category li' ).on( 'click', function() {
$( this ).parent().find( 'li.active' ).removeClass( 'active' );
$( this ).addClass( 'active' );
});
});
I want to show parent li tag is active TYPE ,their children tag are inactive.
When I click anyone child tag , the child li and parent li is active. Remaining children tag are inactive
EXCEPTED OUTPUT:
Before clicking the child node
TYPE //active
Bulb //inactive
Focus light //inactive
Down light //inactive
Touch //inactive
After clicking the child node (Down light)
TYPE //active
Bulb //inactive
Focus light //inactive
Down light //active
Touch //inactive
Demo http://jsfiddle.net/9ff79/707/
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
$( ' ul#shop li a' ).on( 'click', function() {
$( this ).parent().siblings().find( '.active' ).removeClass( 'active' );
$( this ).siblings("#category").addClass( 'active' );
$( this ).addClass( 'active' );
});
$( ' #category li ' ).on( 'click', function() {
$( this ).parent("#category").find( '.active' ).removeClass( 'active' );
$( this ).parent("#category").parent().find(' > a').addClass( 'active' );
$( this ).addClass( 'active' );
});
});
</script>
</head>
<style>
ul.nav a { cursor: pointer; }
.active {
color:blue;
font-weight:bolder;
}
</style>
<body>
<ul class="nav" id="shop">
<li>
<a>Type</a>
<ul id="category" class="nav1">
<li ><a>Bulb</a></li>
<li><a>Focus light</a></li>
<li><a>Downlight</a></li>
<li><a>Touch</a></li>
</ul>
</li>
<li><a>Engery</a></li>
<li><a>Link 3</a></li>
</ul>
</body>
</html>
I have some HTML like
<ul class="sortword">
<li>
<div>ABC</div>
</li>
<li>
<div>DEF</div>
</li>
</ul>
How can I use Javascript to find and click <div>DEF</div> tags
Array.from(document.querySelectorAll('div')).forEach((div) => {
if (div.textContent.trim() === "DEF") {
let evt = new Event('click');
div.dispatchEvent(evt);
}
});
JQuery
Use the :contains selector:
$("div:contains('DEF')").click()
var myList = document.getElementsByClassName("sortword")[0].getElementsByTagName("li")[0];
<ul class="sortword">
<li>
<div>ABC</div>
<div>DEF</div>
</li>
</ul>
You can do this without jQuery by selecting multiple elements and looping through them, but using it will make this a very short and easily readable code snippet. Be sure to include JQuery on your page using a link like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$( '.sortword li div' ).on( 'click', function() {
console.log( $( this ).text() );
});
$( '.sortword li div' ).each( function() {
$( this ).click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sortword">
<li>
<div>ABC</div>
<div>DEF</div>
</li>
</ul>
You can use textContent as illustrated in the following code:
var el = document.querySelectorAll(‘ul li div’), desire;
for (var i = 0; i < el.length; i ++) {
if (el[i].textContent === 'DEF') { desire = el[i]; }
break;
}
Then use can use desire variable later on.
I've got a scenario where (I won't bore you with the details) I need to convert the text of a series of li's into clickable links (all going to the same destination URL). For instance:
<ul class="list-inline">
<li class="link">Australia</li>
<li class="link">Fiji</li>
<li class="link">Oman</li>
<li class="link">Venezuela</li>
</ul>
I'd like for the countries to be converted into clickable links.
Using:
$( ".link" ).each(function() {
$( this ).css( "color", "red" );
});
I can loop through the li's (although ideally I'd like to be able to 'target' the UL and then it's children removing the need for the class="link"...but that's another matter!) and in this instance simply change the colour of the text but I don't know how to change the text into a link.
Any chance someone could give me some pointers please?
Thanks,
craig
You can use html() to write the inner anchor elements without each() using a callback
$('.link').html(function() {
return '' + $(this).text() + '';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-inline">
<li class="link">Australia</li>
<li class="link">Fiji</li>
<li class="link">Oman</li>
<li class="link">Venezuela</li>
</ul>
You can use click since you are using jquery
$( ".link" ).click(function(){
//do something here
alert('clicked');
});
https://api.jquery.com/click/
Consider this:
$( ".list-inline li" ).each(function() {
$( this ).css( "color", "red" ).html(''+$(this).text()+'');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-inline">
<li class="link">Australia</li>
<li class="link">Fiji</li>
<li class="link">Oman</li>
<li class="link">Venezuela</li>
</ul>
But maybe you do not want real links, but just clickable <li>s?
$('.list-inline').on('click', 'li', function(event) {
alert("Go to link");
})
.find('li').css({cursor:'pointer'});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-inline">
<li class="link">Australia</li>
<li class="link">Fiji</li>
<li class="link">Oman</li>
<li class="link">Venezuela</li>
</ul>
You can use callback function of .html() method:
$( ".link" ).html(function(i , oldhtml) {
return "<a href='someref"+oldhtml+"'>"+oldhtml+"</a>"
});
You can use the 'wrapInner' function to do this:
$("ul.list-inline li").wrapInner(function() {
return "<a href='somepage.html'></a>";
});
Although if you have access to the source to change the classes, not sure why you don't just code the links in place...
Is this what you're looking for?
<ul class="list-inline">
<li>Australia</li>
<li>Fiji</li>
<li>Oman</li>
<li>Venezuela</li>
</ul>
$( ".list-inline li" ).each(function() {
$( this ).css( "color", "red" );
var country = $(this).text();
$(this).html(''+country+'');
});
Demo: http://jsfiddle.net/6cjex8b2/
I've used this jQuery example: http://jqueryui.com/sortable/#connect-lists-through-tabs
<script>
$(document).ready(function() {
$(function() {
$( ".connectedSortable" ).sortable().disableSelection();
var $tabs = $( "#tabs" ).tabs();
var $tab_items = $( "ul:first li", $tabs ).droppable({
accept: ".connectedSortable li",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
var $item = $( this );
var $list = $( $item.find( "a" ).attr( "href" ) )
.find( ".connectedSortable" );
ui.draggable.hide( "slow", function() {
$tabs.tabs( "option", "active", $tab_items.index( $item ) );
$( this ).appendTo( $list ).show( "slow" );
});
}
});
});
});
</script>
The html:
<div id="tabs">
<ul>
<li>Category1</li>
<li>Category2</li>
</ul>
<div id="Category1">
<ul id="sortable-Category1" class="connectedSortable ui-helper-reset">
<li class="ui-state-default">Forum 1</li>
<li class="ui-state-default">Forum 2</li>
</ul>
</div>
<div id="Category2">
<ul id="sortable-Category2" class="connectedSortable ui-helper-reset">
<li class="ui-state-default">Forum 3</li>
<li class="ui-state-default">Forum 4</li>
</ul>
</div
But now I'd like that when I change something in the list when I reordered an item.
I know how to write the changes to the database via AJAX etc, but what method is called when something in the list is dragdropped + how do I implement this in the existing javascript above?
And is there a way that I can get the order of the list in the format '[id-of-the-li-item]-[number in the list]' so that I can use a field in the database named 'order' where the order of the items is specified?
What I want to achieve with this is: I've a forum with Categories & forums. I want to use the code above to order the forums / categories (order of forums in a category and moving forums to other categories)
$( ".connectedSortable" ).sortable({
update: function (event, ui) {
var newSeq = [], p = ui.item.parent(), parentId = p.parent().prop('nodeName') === "LI" ? p.parent().attr('id') : 0;
ui.item.parent().children().each(function () {
newSeq.push(this.id);
});
// here you have newSeq... now update it via ajax
}
});
This relies on element's ID. There will be ids in newSeq[]
I have 2 navigation areas. The second should appear when an element in the first is hovered over and it should disappear if the mouse does not move over it.
Very basically i have:
HTML
<ul class="main">
<li class="1">item 1</li>
<li class="2">item 2</li>
</ul>
<div class="sub">
<ul class="1">
<li>1 sub item 1</li>
<li>1 sub item 2</li>
</ul>
<ul class="2">
<li>2 sub item 1</li>
<li>2 sub item 2</li>
</ul>
</div>
I want ul.1 to appear when I hover over li.1 and ul.2 to appear when I hover over li.2, and I want them both to disappear only when I am not hovering over the sub uls.
I've got it working part way:
JAVASCRIPT
var sections = new Array('1', '2');
$.each(sections, function(i, section) {
$('ul.main li.' + section).hover(
function() {
$('div.sub ul').hide();
$('div.sub ul.' + section).show();
}
);
});
This will show the correct section and hide the others, but I can't figure out how what I need so that, when the mouse moves off a ul.main li, the .sub ul disappears if it's not being hovered over.
Update: Fiddle here: http://jsfiddle.net/alluvialplains/XY4mH/
You're part of the way there #EpF. The problem is that your semantic example given above (which is possible to adhere to) is trying to capture a mouseleave event and while it's possible to use jQuery's .not() function to achieve this, it would be expensive. Really, the smartest way to do this is to have an outer wrapper for your whole navigation (wrapping all div's you've got in your existing fiddle) and then bind your show() event to mouseenter, while separately binding your .hide() event (the one for ALL .subz) to an event triggered on mouseleave for the wrapper div.
Given the following HTML:
<div id="nav-wrap">
<ul class="mainz">
<li class="1">item 1</li>
<li class="2">item 2</li>
</ul>
<div class="subz">
<ul class="1">
<li>1 sub item 1</li>
<li>1 sub item 2</li>
</ul>
<ul class="2">
<li>2 sub item 1</li>
<li>2 sub item 2</li>
</ul>
</div>
</div><!-- /END #nav-wrap -->
You can achieve the effect with the following javascript
$( document ).ready( function () {
var $ul = $( '.subz ul' ).hide();
$( '.mainz li' ).on( 'mouseenter', function(event){
$ul.hide().eq( $( this ).index() ).show();
});
$( '#nav-wrap' ).on( 'mouseleave', function(event){
$ul.hide();
});
});
Here is a JSFiddle of it in action: http://jsfiddle.net/XY4mH/4/
Also, I should note that the .hover() function is deprecated in jQuery for quite a while now and could disappear sometime soon. Note that I used the .on() function, which is the correct way to bind these kinds of events in jQuery.
$( document ).ready( function () {
$( '.main li' ).on( 'click', function () {
$( '.sub ul' )
.hide()
.eq( $( this ).index() )
.show();
});
});
That should do the trick. But as #Mottie said, nesting menus would work better / more symantecly
Edit: Sorry this is working on click. Just a sec and I'll have it updated
$( document ).ready( function () {
var $ul = $( '.sub ul' ).hide();
$( '.main li' ).hover(
function () {
$ul
.hide()
.eq( $( this ).index() )
.show();
},
function () {
$ul.hide()
}
);
});