if the code snippet is like this:
<div id="test">
<div>
<h3>First section</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div>
<h3>Second section</h3>
<ul>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
I have the id "test" of the first div. how can i get the innerhtml of clicked items. like alert the answer "item 1" when <li>Item 1</li> is clicked. I already tried this following code
var ul = document.getElementById("test").getElementsByTagName('ul')[0];
ul.onclick = function(event) {
event = event || window.event;
var target = event.target || event.srcElement;
alert(target.getAttribute("href"));
};
This working good only for the first section ul. i need the same to happen for N uls. What will be the best method for this. Thanks in advance.
Note: In my project i can't use jquery. only javascript or YUI is supported
Iterate over each ul and add the click handler to it like
var uls = document.getElementById("test").getElementsByTagName('ul');
for (var i = 0; i < uls.length; i++) {
uls[i].addEventListener('click', clickHandler)
}
function clickHandler(event) {
event = event || window.event;
var target = event.target || event.srcElement;
alert(target.getAttribute("href"));
}
<div id="test">
<div>
<h3>First section</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div>
<h3>Second section</h3>
<ul>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
You can use Event Delegation to achieve the expected result.
Bind a single event handler to the parent, and get the child from event.target
//Get the object of the div#test
var testDiv = document.getElementById('test');
//Bind onclick event for the div#test object
testDiv.onclick = function(e) {
//Prevent the default href action (optional)
e.preventDefault();
//Check whether the target element is an Anchor tag
if (e.target.nodeName == 'A') {
alert(e.target.innerHTML);
}
}
<div id="test">
<div>
<h3>First section</h3>
<ul>
<li>Item 1
</li>
<li>Item 2
</li>
<li>Item 3
</li>
</ul>
</div>
<div>
<h3>Second section</h3>
<ul>
<li>Item 4
</li>
<li>Item 5
</li>
<li>Item 6
</li>
</ul>
</div>
</div>
Related
I am trying to create a number of lists on a word press page. Each in its own div. For Example:
<strong>List One</strong>
<div>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>
</div>
<strong>List Two</strong>
<div>
<ul>
<li>Item Uno</li>
<li>Item Dos</li>
<li>Item Tre</li>
</ul>
</div>
I would like the list header text to be clickable
<strong>List One</strong>
and hide or show when clicked.
where, the default should be hidden
<div style="display: none";>
...
</div>
I can do this using javascript 9see below), however, it seems to conflict with wordpress /php/ template/plugins, etc.
Although my page has only text and the code (see below), it will not work 100%. it takes multiple clicks sometimes for it to work
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
<strong>List One</strong>
<div id="list_one" style="display: none">
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>
</div>
<strong>List Two</strong>
<div id="list_two" style="display: none">
<ul>
<li>Item Uno</li>
<li>Item Dos</li>
<li>Item Tre</li>
</ul>
</div>
Question: Can this be done another way in order to get same affect. i.e. click a link andshow or hide DIV ?
Try adding your script via wp_footer hook. Just enter your javascript function inside the callback function.
function custom_js_functions(){
<script>
//your code goes here.
</script>
}
add_action('wp_footer', 'custom_js_functions');
I have three lists with the same class names. On load, I only show 5 list items per list and there are "show more" buttons which reveals the rest of the list items when clicked.
I want the behaviour such that, when the 'show more" button is pressed for one list, it also shows the hidden list items for the other lists.
My predicament is that the 3 lists behave like 1 big list and show the list items sequentially, instead of showing all the items for all lists together.
Any idea how I can get all the lists to behave in unison?
$(document).ready(function(){
var list = $(".list li");
var numToShow = 5;
var button = $(".next");
var numInList = list.length;
list.hide();
if (numInList > numToShow) {
button.show();
}
list.slice(0, numToShow).show();
button.click(function(){
var showing = list.filter(':visible').length;
list.slice(showing - 1, showing + numToShow).fadeIn();
var nowShowing = list.filter(':visible').length;
if (nowShowing >= numInList) {
button.hide();
}
});
});
.list {
padding: 0;
margin: 0;
}
.list li {
position: relative;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<h1> LIst 1</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="next">Show More</button>
<h1> LIst 2</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="next">Show More</button>
<h1> LIst 3</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="next">Show More</button>
</div>
You must treat the lists separately, like this:
$(document).ready(function(){
var $list = $(".list");
var numToShow = 5;
var $buttons = $(".next");
$buttons.hide();
$list.each(function() {
var $listItems = $(this).find("li");
var $button = $(this).next('.next');
var numInList = $listItems.length;
$listItems.hide();
if (numInList > numToShow) {
$button.show();
}
$listItems.slice(0, numToShow).show();
})
$buttons.click(function(){
var $this = $(this);
var $list = $this.prev(".list");
var $listItems = $list.find("li");
var showing = $listItems.filter(':visible').length;
$listItems.slice(showing - 1, showing + numToShow).fadeIn();
var nowShowing = $listItems.filter(':visible').length;
var numInList = $listItems.length;
if (nowShowing >= numInList) {
$this.hide();
}
});
});
.list {
padding: 0;
margin: 0;
}
.list li {
position: relative;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<h1> LIst 1</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="next">Show More</button>
<h1> LIst 2</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="next">Show More</button>
<h1> LIst 3</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<button class="next">Show More</button>
</div>
As already mentioned by Pedro, the problem with your code is that you select all the li elements at once, no matter which list they belong to.
You should iterate through lists and work with their items separetely.
And if you want behaviour such that, when the 'show more' button is pressed for one list, it also shows the hidden list items for the other lists, you need to iterate through lists on each button click too and show a needed number of items for each of lists.
$(document).ready(function(){
var numToShow = 3;
$(".list").each(function(i, list) {
var li = $(list).find("li");
var numInList = li.length;
li.hide();
if (numInList > numToShow) {
$(list).next(".next").show();
}
li.slice(0, numToShow).show();
});
$(".next").click(function() {
$(".list").each(function(i, list) {
var li = $(list).find("li");
var numInList = li.length;
var showing = li.filter(':visible').length;
li.slice(showing - 1, showing + numToShow).fadeIn();
var nowShowing = li.filter(':visible').length;
if (nowShowing >= numInList) {
$(list).next(".next").hide();
}
});
});
});
.list {
padding: 0;
margin: 0;
}
.list li {
position: relative;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<h1> List 1</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
<button class="next">Show More</button>
<h1> List 2</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
<button class="next">Show More</button>
<h1> List 3</h1>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul>
<button class="next">Show More</button>
</div>
So I have two unordered lists, with the same amount of items in them. So let's assume items in unordered list #2 are all hidden. The only way to make them appear is if you click on the items in unordered list #1.
so basically
<ul class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<ul class="list2">
<li class="hide">item 1</li>
<li class="hide">item 2</li>
<li class="hide">item 3</li>
<li class="hide">item 4</li>
</ul>
Now the way I'm trying to accomplish this is using the index() method, but I'm not sure how to properly approach this code.
This is how I thought of it.
$('.list1').on('click', 'li', function() {
$('.list2 li').index($(this).index()).toggleClass('active');
});
so when you click on an line item in .list1, whatever the index of that line item is, is the index I want to target in .list2
the problem I'm having is that when I console log it, I'm getting weird index numbers. The first line item would show up as 2 rather than 0, and the index for the 2nd line item would be -1.
what am I doing wrong? a lot I'm sure.
thanks in advance guys!
Jquery .index() return index of selected element. You need to use :eq() selector or .eq() method to selecting element with index.
$('.list1').on('click', 'li', function() {
$('.list2 li').eq($(this).index()).toggleClass('active');
});
.hide { display: none; }
.active { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<ul class="list2">
<li class="hide">item 1</li>
<li class="hide">item 2</li>
<li class="hide">item 3</li>
<li class="hide">item 4</li>
</ul>
try this, this will work for you fine
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
/* in here we get the ul which the class name is list2 and get the li elements inside it and hide those first*/
ul.list2 li{
display: none;
}
</style>
<body>
<ul class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<ul class="list2">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("ul.list1 li").click(function(){
var theindex = $(this).index();//in here you get the index number of clicked li element inside list1 class
$("ul.list2 li").eq(theindex).slideToggle(500);//then in here, you show the same index li element in list2 , which we are hidden.
});
});
</script>
</html>
This question already has answers here:
jQuery: How to use each starting at an index other than 0
(3 answers)
Closed 7 years ago.
Is it possible to start an each loop starting from a certain element instead of all the elements?
e.g. If i wanted to make items above "Item two" red. (I'm aware there's no need for an each loop to do that, this is just an example case)
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
$('li').each(function(){
$(this).css("color", "red");
});
You can check current item index and skip iteration:
$('li').each(function(){
if( $( this ).index() < 2 ) return true;
$(this).css("color", "red");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
You can use index property of .each function.
$('li').each(function(index) {
if (index > 1) {
$(this).css("color", "red");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
This can be done as follows
$(document).ready(function(){
var lis = $('ul').children();
console.log($(lis).length);
for(var i = 1; i < 3; i++)
{
$(lis[i]).css("color", "red");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
I wish to remove the <ul> tags for a nested list and then add its child <li> elements to the parent <ul> element. For example :
<ul>
<li>Item 1</li>
<ul>
<li>Item 2</li>
</ul>
<li>Item 3</li>
</ul>
Should become :
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
I am new to jQuery and what I have created so far is not working and I am not sure why:
$content.find('ul').each(function() {
if ($(this).parent().is('li')) {
var elements = $(this).children().detach();
var closest = $(this).closest('li');
$(this).remove();
elements.appendTo(closest);
}
}
Any help much appreciated.
use .unwrap()
DEMO or DEMO
$('ul > ul > li').unwrap('ul');
try
var elements = [];
$('ul.outer li').each(function(){
elements.push(this);
});
$('ul.outer').html('');
for(x in elements){
$('ul.outer').append($(elements[x])[0].outerHTML);
}
if you need it to work for .. multiple levels deep .. for example
<ul class="outer">
<li>Item 1</li>
<ul>
<li>Item 2</li>
<ul>
<li>Item 2</li>
</ul>
</ul>
<li>Item 3</li>
</ul>