<div class="panel-body">
<ul>
<li class="clearfix"><span class="pull-left">One leg</span><img src="images/plus-icon.png" alt="" /><span>Add to Cart</span></li>
<li class="clearfix"><span class="pull-left">Two Leg</span><img src="images/plus-icon.png" alt=""><span>Add to Cart</span></li>
<li class="clearfix"><span class="pull-left">Full</span><img src="images/plus-icon.png" alt=""><span>Add to Cart</span></li>
<li class="clearfix"><span class="pull-left">Half</span><img src="images/plus-icon.png" alt=""><span>Add to Cart</span></li>
</ul>
</div>
<ul id="ae__orders__content">
</ul>
$(document).ready(function () {
$(".clearfix").click(function () {
var temp = $(this).text();
var updatedString = temp.replace("Add to Cart", "");
$("#ae__orders__content").append("<li id=\"" + updatedString + "\" class=\"clearfix\"><span class=\"pull-left\">");
$("#ae__orders__content").append("<b>" + updatedString + "</b></span><img src=\"images/sm-icon.png\" alt=\"\">Remove from Cart</li>");
});
});
I am trying to dynamically add li when someone clicks Add to Cart. It goes to to cart in the ul with id "ae__orders__content". Till this part everything is working fine. but i want to remove li that is added dynamically when remove from cart is clicked. I have tried almost everything and found the solution given below. It removes all the items from UL instead the only LI that is clicked.
$("#ae__orders__content").click(function () {
//$(this).children().focus().remove();
alert("remove");
//$('li', ul).last().remove();
$(this).children().remove();
return false;
});
Add to cart is working fine. I want to remove li when remove from cart is clicked.
It looks like you want the <a> that gets appended to be the click target for removing the li, so:
$(".ae__orders__content").on("click", "a.ae__remove-cart", function () {
$(this).parent().remove();
});
Related
I am basically working on a responsive navigation bar where if the current window width doesn't accommodate the number of items, last item of the list will get appended to another un-ordered list.
My problem is I need to target menu items within the hidden list which is empty when the width of the window is 100%. I could access the un-ordered list for visible list but not for the hidden list as per below jQuery. I understand that I am trying to access items that doesn't exist yet, but there must be a way.
Snippet:
var $vlinks = $('#hrmenu .visible-links');
var $hlinks = $('#hrmenu .hidden-links');
availableSpace = $vlinks.width() - 30;
var
break = [];
areaAvail += w + 20;
break.push(areaAvail);
visibleItems = $vlinks.children().length;
requiredSpace =
break [visibleItems - 1];
if (requiredSpace > availableSpace) {
$vlinks.children().last().prependTo($hlinks);
}
$(document).ready(function() {
//Visible list
$('#shuffle-btn > li > a').click(function(event) {
$item = $(event.currentTarget).parent('li');
console.log($item.index());
});
//Hidden list list
$('#hidshuffle-btn > li > a').click(function(event) {
$item = $(event.currentTarget).parent('li');
console.log($item.index());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="hrmenu" class="prdct-hrmenu">
<ul id="shuffle-btn" class="visible-links">
<li>item-1
<ul>
<li>Item-1-a</li>
</ul>
</li>
<li>item-2
<ul>
<li>Item-1-a</li>
</ul>
</li>
<li>item-3
<ul>
<li>Item-3-a</li>
</ul>
</li>
<li>item-4
<ul>
<li>Item-4-a</li>
</ul>
</li>
</ul>
<ul id="hidshuffle-btn" class="hidden-links">
</ul>
</nav>
As the elements in the hidden list are not available during DOM ready, you need to define a click handler that can delegate to these elements when they are available. You can use JQuery's on function for this like below.
$(document).ready(function(){
//Hidden list list
$('#hidshuffle-btn').on('click', ' li > a', function(event){
var $item = $(event.currentTarget).parent('li');
console.log($item.index());
});
});
Here's a sample Pen in action :)
For dynamically added elements, you just need to change your line from:
$('#shuffle-btn > li > a').click(function(event) {
to
$(document).on('click', '#shuffle-btn > li > a', function(event) {
Similarly for the hidden list:
$('#hidshuffle-btn > li > a').click(function(event) {
to
$(document).on('click', '#hidshuffle-btn > li > a', function(event) {
**#Arkantos's answer is more correct in terms of performance.
I am adding li elements to a menu programatically every time the user clicks a button. Here is the starting menu:
<ul id="menu">
<li><a href='#'>Add to this menu</a>
<ul class = 'addition'>
</ul>
</li>
</ul>
I then add to it using this:
$("#menu ul.addition").append('<li><a href="#" id=addition' + userText + '>addition' + userText + '</a></li>');
Where user text is some unique String added by the user. The problem is that when I try to get a specific li from the menu after it is populated, it only returns the first li.
$("#menu ul.addition").click(function() {
var selected = $('#menu ul.addition a').attr('id');
console.log(selected);
});
always logs the first menu item even though there are many being populated. when I change the selection to to select the html like so:
var selected = $(this).html();
console.log(selected);
It just logs every li element added to the menu.
What am I doing wrong here? I need to select the correct menu option that the user clicks on.
When you access an attribute for a set of multiple elements, you'll get the attribute of the first element in the set. In your code, you're selecting the id of the first <a> element in your <ul> upon any click on the <ul>.
In order to identify which <a> was clicked, its easiest to listen for a click on the <a> elements rather than on the <ul> container.
Since the <li> and <a> elements are added after the DOM loads, you'll need to delegate your click handler. I suggest binding the listener to your existing <ul>, but listening for a click on any programmatically-added child li > a element.
Then, you can use JavaScript's this keyword to refer to the clicked element and collect its "id".
var userText="SampleText";
$("#menu ul.addition").append('<li>addition' + userText + '</li>');
userText="AnotherSample";
$("#menu ul.addition").append('<li>addition' + userText + '</li>');
$("#menu ul.addition").on('click','li a',function() {
var selected = this.id;
$('div#output').html(selected);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
<li><a href='#'>Add to this menu</a>
<ul class = 'addition'>
</ul>
</li>
</ul>
<div id="output"></div>
I think you are more or less on the the right track. If you slightly changed your click function, you can get the ID of the menu option, clicked by the user. Here is a fiddle for it.
$("#menu ul.addition").click(function(e) {
alert(e.target.id);
for (var prop in e) {
console.log(prop + " : " + e[prop]);
}
$('#menu ul.addition a').attr('id');
// console.log(selected);
});
var $li = $('<li><a href="#" id=addition' + userText + '>addition' + userText + '</a></li>');
$li.click(function(){
var selected = $(this).html();
console.log(selected);
});
$("#menu ul.addition").append($li);
It seems this is what you want
First of all, you have change <a href="#" id=addition' + userText + '> to <a href="#" id="addition' + userText + '">
When you run $('#menu ul.addition a') jquery returns all the <a> nodes, but when you try to get the ID of a set, Jquery selects the first node in the set.
If you want to select a specific item on the list, use the unique ID.
$('#menu ul.addition #your-unique-id).click(doSomething)
if you want to create a generic function for clicking any of the added items:
$("#menu ul.addition").on('click', 'a', function(ev){
console.log(this);
})
If you want to get the specific li you need to use this example:
$("#add").click(function() {
$(".addition").append('<li>Item 1</li>');
$(".addition").append('<li>Item 2</li>');
$(".addition li a").click(function() {
var item = $(this).text();
alert(item);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
<li>Add to this menu
<ul class="addition">
</ul>
</li>
</ul>
$("#menu ul.addition").on('click', 'li', function() {
console.log($(this).attr('id'));
});
I have 4 images in an unordered list. Ideally I want to be able to load all the list items into an array and do a check to see which one is currently hovered.
I know using the jQuery is() function I can check which is in an :hover state. How would I apply this check to all items within that list array?
<ul class="image-list">
<li class="image-item"><img src="/image1.jpg"/></li>
<li class="image-item"><img src="/image1.jpg"/></li>
<li class="image-item"><img src="/image1.jpg"/></li>
<li class="image-item"><img src="/image1.jpg"/></li>
</ul>
Thanks for any help.
DIM3NSION
Use the mouseover() function:
// Add mouseover event to all your image-items
$('.image-list > .image-item').mouseover(function() {
// $(this) is your hovered image-item object
alert($(this).find('img').attr('src'));
});
Working jsfiddle
Demo: http://jsfiddle.net/GCu2D/758/
JS:
$(function () {
var li = $("ul li"); //get all li. All li are stored in an array.
$(document).on("mouseover", "ul li.image-item", function (e) {
var ele = $(this); //get currently hovered li.
var item = li.index(ele); //get the index of the currently hovered li in that array
console.log(item); //this logs the index. Using this index, do whatever you want with that item.
});
});
Having some problems with jQuery methods - perhaps overcomplicating things...
What I need to find is if any of the li elements classes contain the word 'current', then if they do, append the word active to them.
I'm struggling to add the word to the end of the current class. For example:
Markup:
<div class="menu-navigation-container">
<ul>
<li class="current_page_item menu-item-8787"><span>The Magazine</span>
</li>
<li class="menu-item menu-item-type-post_type"><span>Snapped</span>
</li>
</ul>
</div>
jQuery:
$(document).ready(function () {
var classNames = $('.menu-navigation-container ul li').attr("class").match(/[\w-]*current[\w-]*/g);
$(classNames).each(function () {
$(this).addClass("active");
});
});
Running classnames; up in the console produces just the string - I want it to reference the li elemens that have the word 'current' in their class names, then append the word 'active' at the end.
Can I do this with jQuery's attribute contains selector?
Simply like this :
$(document).ready(function () {
$('.menu-navigation-container ul li[class*=current]').addClass('active');
});
Try this
$(document).ready(function () {
$('.menu-navigation-container ul li').each(function(){
if ( $(this).is(".current") )
{
$(this).addClass("active");
}
})
});
Hi i have following ul li that display categories name:
<ul>
<li class="selected" data-tab-id="0"></li>
<li data-tab-id="12">...</li>
<li data-tab-id="3">...</li>
<li data-tab-id="15">...</li>
<li data-tab-id="7">...</li>
</ul>
The javascript scripts as follow:
<script type="text/javascript">
var cat_id = '<?=$this->catid?>'
$(document).ready(function () {
});
</script>
Currently the page at index so first li data-tab-id="0" will be selected class also var cat_id will be return nothing. Now when user navigate to another tab such as data-tab-id="12", var cat_id will be return value of 12, how can i remove class selected from default li and replace it to data-tab-id="12". Thanks
Assuming list as ID of the UL – just to avoid problem in case you have multiple UL around the page:
$("ul#list")
.find(".selected").removeClass("selected")
.end()
.find("[data-tab-id=" + cat_id + "]").addClass("selected");
You can also do that in two jQuery calls, of course:
$("ul#list .selected").removeClass("selected");
$("ul#list [data-tab-id=" + cat_id + "]").addClass("selected");
use addClass() and removeClass() to add and remove class respectively.
try this
updated
var cat_id = '<?=$this->catid?>';
$('li').removeClass('selected');
$('li').each(function(){
if($(this).attr('data-tab-id')==cat_id){
$(this).addClass('selected');
}
})
updated without using loop..
var cat_id = '<?=$this->catid?>';
$('li').removeClass('selected');
$('li[data-tab-id='+cat_id+']').addClass('selected');
fiddle here
updated fiddle
use this sample
$('ul li').click(function() {
$('ul li.selected').removeClass('selected');
$(this).closest('li').addClass('selected');
})