I am trying to loop through some navigation HTML because I need to modify some items dynamically. Specifically how would I loop through each item with class Droppable and get the jQuery object for certain children. I have posted my code below with a bunch of asterisks(*) denoting notes of the things I need to manipulate as jquery objects.
<nav id="sitenav">
<ul class="container ul-reset">
<li class="droppable "> ****** foreach of these
<a class="RootNode" id="Help" href="javascript:;">HELP</a> ****** I need this
<div class="mega-menu">
<div class="container cf">
<div style="display: inline-block;">
<ul class="ul-reset"> ****** and I need this
<a class="heading disabled" id="Help_Help" href="javascript:;">
<h3>Help</h3>
</a>
<a id="ContactUs" href="/ContactUs/">Contact Us</a>
<a id="UserGuides" href="/Help/">User Guides</a>
</ul>
</div>
</div>
</div>
</li>
{more lis with the same structure...}
</ul>
</nav>
I tried the below but I get an error that this doesn't have a find method, which I thought it would because I thought this would be the current jQuery wrapped DOM element from the each loop.
$("li.droppable").each(function (index) {
var header = this.find("a.RootNode");
var col = this.find("ul.ul-reset");
});
.find() is a jQuery method and you can't call it on DOM object this.
You could instead call the .find() method on jQuery object $(this), so it should be :
$("li.droppable").each(function(index) {
var $this = $(this);
var header = $this.find("a.RootNode");
var col = $this.find("ul.ul-reset");
});
Related
I am trying to take content from a nav bar, and then modify and append it to a mobile menu. The nav bar html looks like
<div id="top_bar" class="nav">
<div class="container">
<div class="row">
<nav class="clearfix">
<span>My Account</span>
<span> Rewards</span>
<span>Customer Service</span>
</nav>
</div>
</div>
</div>
I need to append the anchors above to the following menu and have them work in the format below.
<ul id="stmobilemenu" class="visible-xs visible-sm show">
<li class="stmlevel0">first</li>
<li class="stmlevel0">second</li>
<li class="stmlevel0">third</li>
</ul>
I tried to do this like
var add_to_menu;
$('#top_bar nav a').each(function(){
var line = '<li class="stmlevel0">';
$(this).addClass('ma_level_0');
line += $(this).html();
line += '</li>';
add_to_menu += line;
})
$('#stmobilemenu').append(add_to_menu);
The result of this was it added undefined, then it added only the content
so appeneded was in this type of format.
<li class="stmlevel0"><span>My account</span></li>
what I want it to add is in this type
<li class="stmlevel0"><span>My account</span></li>
Another thing I tried was
$('#stmobilemenu').append(
$('#top_bar nav a').each(function(){
$(this).prepend('<li class="stmlevel0">');
$(this).addClass('ma_level_0');
$(this).append('</li>');
}));
I had a few problems with this though, first of all the append and prepend were not actually surrounding the html I want. It comes out like
<a href="http://127.0.1.1:8080/my-account" class="top-bar-link ma_level_0">
<li class="stmlevel0"></li>
<span>My account</span>
</a>
So I need that li to actually surround the a. Also it actually removed the content of #top_bar nav a from its original spot, which is not what I want it to do. I want it only to copy and add to the mobile menu. Can someone help?
Use clone() to make a copy of each <a>
var $mobMenu= $('#stmobilemenu');// store reference to menu element
$('#top_bar nav a').each(function(){
var $link = $(this).clone().removeClass().addClass('ma_level_0');
$('<li class="stmlevel0">').append($link).appendTo( $mobMenu);
});
var anchors = $('#top_bar nav').children();
anchors.each(function(){
var $this = $(this),
$li = $('<li class="stmlevel0"></li>');
$this.removeClass().addClass('ma_level_0').appendTo($li);
$li.appendTo('#stmobilemenu');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top_bar" class="nav">
<div class="container">
<div class="row">
<nav class="clearfix">
<span>My Account</span>
<span> Rewards</span>
<span>Customer Service</span>
</nav>
</div>
</div>
</div>
<ul id="stmobilemenu" class="visible-xs visible-sm show">
<li class="stmlevel0">first</li>
</ul>
I have html rendered in the format below.
I want to be able to get the values 13,14,15 and store in different variables.
I want to be able to get the value id=9 as well for this row.
I will be updating a table and needs this Id together with the other rows.
Here is the html rendered
<li class="main">
<ul class="sub">
<li id="9">
<div class="innera">13</div>
<div class="innerb">14</div>
<div class="innerc">15</div>
<div class="innerpencil">
<img class="modify" src="/images/icon-pencil" />
</div>
</li>
</ul>
<li>
Here is the jquery I am trying to write
$(document).on("click", "img.modify", function () {
var rowA = $("ul[class='sub'] li[div.class innera]")
var rowB = $("ul[class='sub'] li[div.class innerb]")
var rowB = $("ul[class='sub'] li[div.class innerc]")
var Id of row ?
});
Right now I am not getting anything for the variables? Kindly assist.
I think you just need to review the jQuery (CSS) selectors: https://api.jquery.com/category/selectors/
$("ul[class='sub'] li[div.class innera]") won't match anything.
$('ul.sub>li>div.innera') would work, but maybe you want something a little different. Take a look at the selectors docs, and some trial and error :)
Can't you use a foreach loop on the li tag?
Like this?
$(document).on("click", "img.modify", function () {
var id = $('.sub > li').first().attr("id");
console.log(id);
$('#'+id+' > .divValue').each(function () {
var variableName = $(this).text();
console.log(variableName);
});
});
}
I would add an class to the elements value you want.
Like this:
<li class="main">
<ul class="sub">
<li id="9">
<div class="innera divValue">13</div>
<div class="innerb divValue">14</div>
<div class="innerc divValue">15</div>
<div class="innerpencil">
<img class="modify" src="/images/icon-pencil" />
</div>
</li>
</ul>
<li>
I have a banner which is something like this:
<ul id="carousel">
<li id="item1">
<div onclick="window.open('mylinkhere.com,'_blank')" style="cursor:pointer;margin-left:-436px;width:996px;height:100%">
</div>
</li>
<li id="item2">
<div onclick="window.open('myotherlinkhere.com,'_blank')" style="cursor:pointer;margin-left:-436px;width:996px;height:100%">
</div>
</li>
</ul>
I need to access the links written in onclick attribute i.e. mylinkhere.com
I tried
var banners = $($("#carousel")[0]).children().filter("li");
var b_items = $(banners[0]).children().filter("div");
attr_val = $(".b_items")[0].attr("onclick");
But i couldn't. By the way i don't know from the start that which item will be in the carousel because it's randomized by another function. So i cannot access them with item1 item2 ect.
Thanks.
You can set the url in a data attribute and read easily like this:
<ul id="carousel">
<li id="item1">
<div data-url="mylinkhere.com" onclick="window.open($(this).data('url'),'_blank')" style="cursor:pointer;margin-left:-436px;width:996px;height:100%">
</div>
</li>
<li id="item2">
<div data-url="myotherlinkhere.com" onclick="window.open($(this).data('url'),'_blank')" style="cursor:pointer;margin-left:-436px;width:996px;height:100%">
</div>
</li>
</ul>
To read:
var b_items = $(banners[0]).children().filter("div");
var link = $(b_items).data('url');
See this fiddle:
http://jsfiddle.net/Pontual/pugytfwu/
For me, the following code works as expected (Chrome 44, jQuery 2.1.3):
var s = jQuery('#carousel li div');
s.each(function(i,node) {
alert(jQuery(node).attr('onclick'));
});
http://jsfiddle.net/aavf1450/
Possible problem is that in your code, you do not wrap the element into $(...), so .attr() is not a valid function, as using indexers on a jQuery object returns raw HTML elements.
I'm testing Sortable.js lists with this small example. I have a list of elements to be dragged from, and another list to store them by dropping the elements.
NOTE: Sortable.js is different from JQuery-ui sortable, but the lack of Sortable.js documentation is making me consider switching to JQuery-ui Sortable, so I would accept an answer using it.
The thing is, the drop area is the list, and it is a bit frustrating dropping over the edged of that list panel and not getting the item correctly dropped. Also, it is hard to find the list when empty if it has no borders.
Sortable.js has an attribute named ghostClass, and according to the documentation it should store the class name for the drop placeholder.
So I'm using the class name of the second list panel as the ghostClass for the first list. Nevertheless, it is not working, and item only get correctly dropped when over the list and not over the panel.
HTML:
<div class="panel panel-primary">
<div class="panel-heading">Fruit store</div>
<div class="panel-body">
<ul id="fruit-list" class="list-group">
<li href="#" class="list-group-item" data-type="apple">Apple</li>
<li href="#" class="list-group-item" data-type="pear">Pear</li>
<li href="#" class="list-group-item" data-type="banana">Banana</li>
<li href="#" class="list-group-item" data-type="watermellon">Watermellon</li>
</ul>
</div>
</div>
<div class="panel panel-primary droppable-area">
<div class="panel-heading">Shopping cart</div>
<div class="panel-body">
<ul id="cart-list" class="list-group">
<li href="#" class="list-group-item" data-type="banana">Banana
<div class="pull-right"> <span id="badge" class="badge">5</span>
</div>
</li>
<li href="#" class="list-group-item" data-type="pear">Pear
<div class="pull-right"> <span id="badge" class="badge">2</span>
</div>
</li>
</ul>
</div>
</div>
JS:
// Create fruit store list
var list_element = document.getElementById("fruit-list");
var fruit_list = new Sortable(list_element, {
group: {
name: "fruit_group",
pull: 'clone',
put: false
},
sort: false,
ghostClass: "droppable-area",
});
// Create shopping cart list
var cart_list_element = document.getElementById("cart-list");
var cart_list = new Sortable(cart_list_element, {
group: {
name: "fruit_group",
pull: true,
put: true
},
});
Any idea? Here is a working JSFiddle.
This is what the ghostClass setting does:
When dragging an object sortablejs creates a placeholder where the item will be dropped if you let it go that instant. That placeholder will get the class set to it of the ghostClass value.
In your case:
Remove the 'droppable-area' class name in your panel-div.
Create css: .droppable-area { border: 1px solid black; }
Now you'll see a dashed-box of where you'll item wil end up if you'll stop dragging.
So I've got 2 <ul> containers each with id's. Inside of them are a list of <li> elements.
The first <ul> is <ul id="coaches-list">. The second is <ul id="players-list">.
There are tags within each <li> that have an id called close (which is a link that I'm using as my selector), which will delete each <li> node once clicked. I'm trying to target each <ul> container to see where it is coming from.
My HTML is:
<!-- coaches box -->
<div class="box">
<div class="heading">
<h3 id="coaches-heading">Coaches</h3>
<a id="coaches" class="filter-align-right">clear all</a>
</div>
<ul id="coaches-list" class="list">
<li><span>Hue Jackson<a class="close"></a></span></li>
<li class="red"><span>Steve Mariuchi<a class="close"></a> </span></li>
</ul>
</div>
<!-- players box -->
<div class="box">
<div class="heading">
<h3 id="players-heading">Players</h3>
<a id="players" class="filter-align-right">clear all</a>
</div>
<ul id="players-list" class="list">
<li><span>Steve Young<a class="close"></a></span></li>
<li><span>Gary Plummer<a class="close"></a></span></li>
<li><span>Jerry Rice<a class="close"></a></span></li>
</ul>
</div>
My remove tag function in jQuery is:
function removeSingleTag() {
$(".close").click(function() {
var $currentId = $(".close").closest("ul").attr("id");
alert($currentId);
// find the closest li element and remove it
$(this).closest("li").fadeOut("normal", function() {
$(this).remove();
return;
});
});
}
Whenever I click on each specific tag, it's removing the proper one I clicked on, although when I'm alerting $currentId, if I have:
var $currentId = $(".close").closest("ul").attr("id");
It alerts 'coaches-list' when I'm clicking on a close selector in both <ul id="coaches-list" class="list"></ul> and <ul id="players-list" class="list"></ul>
If I change that to:
var $currentId = $(".close").parents("ul").attr("id");
It has the same behavior as above, but alerts 'players-list', instead.
So when using closest(), it's returning the very first <ul> id, but when using parents(), it's returning the very last <ul> id.
Anyone know what is going on with this whacky behavior?
It's expected behavior.
You should use:
var $currentId = $(this).closest("ul").attr("id");
$(this) points at the clicked .close.
$(".close") points at the first one found.
It's because you run that selector from click handler you should use this instead:
var $currentId = $(this).closest("ul").attr("id");
Try using this function to get the parent:
var $currentId = $(this).parents().first();
I've never used the .closest() function but according to jQuery what you have specified should work. Either way, try that out and tell me how it goes.
You also need to make it so that it selects the current element by using $(this)