Get id From Event Trigger - javascript

I have tried everything that I have found on Stack Overflow, but I cannot get this to work. Here is my code.
$(document).ready(function(){
$(".category, .submenu").mouseenter(function(){
var i = 0;
var id = "#category1" /*-- $(obj).attr("id"); */
if (id == "#category1") {i = 1};
$("#submenu" + i).toggleClass("submenuHover");
$("#category" + i).toggleClass("categoryHover");
});
$("#category1, #submenu1").mouseleave(function(){
$("#submenu1").toggleClass("submenuHover")
$("#category1").toggleClass("categoryHover");
});
$("#category2, #submenu2").mouseenter(function(){
$("#submenu2").toggleClass("submenuHover");
$("#category2").toggleClass("categoryHover");
});
$("#category2, #submenu2").mouseleave(function(){
$("#submenu2").toggleClass("submenuHover");
$("#category2").toggleClass("categoryHover");
});
});
<a id="category1" class="category" href="#">Category 1</a>
<div id="submenu1" class="submenu">
<div>
<b>Column 1</b>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<div>
<b>Column 2</b>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
<a id="category2" class="category" href="#">Category 2</a>
<div id="submenu2" class="submenu">Submenu #2
<div>
<b>Column 1</b>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<div>
<b>Column 2</b>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
line > var id = "#category1" /*-- $(obj).attr("id"); */
is where my problem is.
I have commented out $(obj).attr("id"); and added "#category1".
It works like this.
How do I get the id so I can condense this code into one block?
Also, this is still a work in progress so once I figure out this step I want to combine mouseenter and mouseleave to use the same value of i, and I don't know how to proceed with that part yet.

To get the id from the class that triggered the event:
$(".category, .submenu").mouseenter(function(){
var id = $(this).attr('id');
...
}
Next time make a JSFiddle but here's one I made for you, showing that it works.
https://jsfiddle.net/3yn4e0ng/
Look in the console for proof that it is getting your id.
Lastly, you're going to have issues with your comparison statements like these:
if (id == "#category1") {i = 1};
because jQuery doesn't return the (#) symbol. You're explicitely asking for the id so there's no reason for jQuery to pass back a # sign into the string, indicating that thisis an id.
Consider this instead:
if (id == "category1") {i = 1};
Note: There's no reason for you to use == over === unless your insecure about whether the id that jQuery fetches is of type string. Read this amazing post: Which equals operator (== vs ===) should be used in JavaScript comparisons?

you can do it like this:
var id = $(this).hasClass("category") ? $(this).attr("id") : $(this).closest(".submenu").prev("a").attr("id");
this is a working fiddle.

Related

How do I add child <li> elements to <ul> without removing current children

How do I iteratively add children elements to a (for example) a .
<ul id="my-list">
<li>item 1</li>
<li>item 2</li>
</ul>
If I have a JS script that runs something like this several times:
document.getElementById('my-list').appendChild('someListItemICreated')
the current 2 list items are removed. How do I add new li items to the ul without losing the current list itmes?
You need to provide an element as the argument for appendChild and not a string. Like this:
const li = document.createElement("li");
li.innerText = "Item 3";
document.getElementById("my-list").appendChild(li);
<ul id="my-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
A much easier and a cleaner approach that I prefer in most of cases is:
document.getElementById("my-list").innerHTML += "<li>Item 3</li>";
<ul id="my-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
const c = document.createElement('li');
c.innerText = 'item 3';
document.getElementById('my-list').appendChild(c);
<ul id="my-list">
<li>item 1</li>
<li>item 2</li>
</ul>
I think you need to be more specific with what your code is actually doing, but I can say that someListItemICreated should not be a string, if that's what you're passing. Here's an example I made that's similar to what you're referring to that runs fine.
<ul id="my-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
let someListItemICreated = document.createElement("li");
someListItemICreated.appendChild(document.createTextNode("item 3"));
document.getElementById("my-list").appendChild(someListItemICreated)

Change css class after given number of items inside div

I need to change css display value of items inside div using jQuery.
What I need to do is, get number of items inside the div element. (Ex- li elements).
If number of li elements inside the div is more than 6, I need to set display:none css value to them, while first 6 li items remain display:block
How can I do that?
I can get number of li elements inside div by using this code,
$(window).ready(function () {
var itemCount = 1;
if ($(window).width() < 768) {
if ($('#my-div li').length > 6) {
var k = $('#my-div li').length;
alert("no of items =" + k);
}
}
});
How can I achieve this?
You can use $('#my-div li').not(":lt(6)").hide() to show the first 6 li in your div.
Demo
$(window).ready(function() {
var itemCount = 1;
if (true) { // changed < to > for the example
if ($('#my-div li').length > 6) {
var k = $('#my-div li').length;
alert("no of items =" + k);
$('#my-div li').not(":lt(6)").hide()
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my-div">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</div>
Here you got a very easy way to show only the first 6 elements with slice() method, check this:
if($('#my-div > li').size() > 6){
$('#my-div > li').slice(6).hide()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="my-div">
<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>
</ul>
You can loop the list and hide it if the index is more than N.
Index start at 0
$('.container > li').each(function(i, e) {
if (i >= 6) { $(this).hide() }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="container">
<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>
</ul>
Another approach using jQuery selector :gt
$('#my-div li:gt(5)').hide(); //Index starts from 0 so 5 is 6
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul id="my-div">
<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>
</ul>
$(document).ready(function(){
$("ul li:gt(5)").hide();
//List elements with an index > 5
});
<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>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>

is it possible, to add auto incremental classes to a list by using jquery or javascript

is it possible, to add auto incremental classes to a list
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
Now, If I hover on Element 3 then, add auto incremental classes to li like example below...
<ul id="list">
<li class="left2">Element 1</li>
<li class="left1">Element 2</li>
<li>Element 3</li>
<li class="right1">Element 4</li>
<li class="right2">Element 5</li>
</ul>
Again if hover on Element 1 then, add auto incremental classes to li like example below...
<ul id="list">
<li>Element 1</li>
<li class="right1">Element 2</li>
<li class="right2">Element 3</li>
<li class="right3">Element 4</li>
<li class="right4">Element 5</li>
</ul>
sorry about my poor English. Thank you.
$('li').hover(function() {
$('li').removeClass();
var next = $(this).nextAll();
next.each(function(i, v) {
$(this).addClass('right' + (i+1))
})
var prev = $(this).prevAll();
prev.each(function(i, v) {
$(this).addClass('left' + (i+1))
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
Use .prevAll() and .nextAll()
Description: Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.
Description: Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
then iterate on the li and assign the index. make sure to remove the li classes so it wont stack up
Based on example, I cleared all the class in <li> when mouseenter anyone of the <li> and add new class for them.
left1+n will add to previous all <li> and right1+n will add to next all <li>
$("#list > li").on("mouseenter", function(){
$("#list > li").attr("class", "");
$(this).prevAll("li").each(function(i) {
$(this).addClass('left' + (i+1));
});
$(this).nextAll("li").each(function(i) {
$(this).addClass('right' + (i+1));
});
});

Looping through .find() results and gathering .text()

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

Divide groups of unordered lists into sub-groups of 3

I have groups of unordered lists and I am trying to divide each list group into sub-groups of 3 dynamically. So far I have this:
var uls = $("ul > li");
for(var i = 0; i < uls.length; i+=3) {
uls.slice(i, i+3).wrapAll("<ul class='new'></ul>");
}
... for some sample HTML below
<h2>Group 1</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<h2>Group 2</h2>
<ul>
<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>
</ul>
The issue I am having is that my code just lumps all the <ul>s together without regard to groups, i.e. 'group 1' 'group 2' I tried using .each(function() { on $("ul > li") but I just get errors. I also tried moving down the each function after .length but that did not work either.
So the final HTML would look like this:
<h2>Group 1</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<h2>Group 2</h2>
<ul>
etc...
My fiddle is here but as you can see it's not quite working yet.
How's this? http://jsfiddle.net/4Bms6/
$('ul').each(function(){
var uls = $("li", this);
for(var i = 0; i < uls.length; i+=3) {
var lis = $("li", this);
uls.slice(i, i+3).wrapAll("<ul class='new'></ul>");
}
});​
The reason you were getting incorrect grouping is because you were starting off by collecting every single li ("ul > li" equates to all li that are children of any ul). What you should have been doing is selecting all li that are children of each ul, perform the grouping, then move on to the next ul.

Categories

Resources