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.
Related
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");
});
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 am trying to add a div like below
<div id="topheader" class="topheader">
<ul>
<li>
Library
</li>
<li>
My Uni
</li>
<li>
Staff Intranet
</li>
</ul>
</div>
in between two other divs
<div id="w3">
.... new div to be here ...
<div id="head">
I need to get this done using javascript or motools and not jquery.
You can do it using inject
var headEle = document.id('head');
new Element('div', {
"class": 'topheader',
"id": 'topheader',
html: '<ul><li>Library</li><li>My Uni</li><li>Staff Intranet</li></ul>'
}).inject(headEle, 'before');
Here is a working JS FIDDLE
var div_before = document.getElementById("w3");
var new_div = document.getElementById("topheader");
div_before.parentNode.insertBefore(new_div, div_before.nextSibling);
jsfiddle DEMO
I am working on a node.js application which generates a html page. This html page displays a list of associates built according to the data passed onto this page. A list is built something like as follows:
<ul class="notification-body" style="">
//loop for all assocaite id's passed to this page
<li class="testClass" data-associateid="<%= assocID %>">
<span>
<span class="subject">
<label class="btnClass label label-info">ClickMe!</label>
</span>
</span>
</li>
The generated html src looks something like this:
<ul class="notification-body" style="">
<li class="testClass" data-associateid="AA01">
<li class="testClass" data-associateid="AA02">
<li class="testClass" data-associateid="AA03">
I am trying to get the value of the data attribute using Jquery & I tried the following:
$(".btnClass").click(function(){
console.log($".testClass").attr("data-associateid"));
});
But this outputs'AA01'everytime i click on the btn and I am not getting the expected output in the console:
AA01
AA02
AA03
I tried the following also but it gives me undefined:
$(".btnClass").click(function(){
console.log($(this).find(".testClass").attr("data-associateid"));
});
You need to use jQuery.data().
I've created a jsFiddle to show this working.
I've closed the LI because AR.
<ul class="notification-body" style="">
<li class="testClass" data-associateid="AA01">1</li>
<li class="testClass" data-associateid="AA02">2</li>
<li class="testClass" data-associateid="AA03">3</li>
</ul>
Here's the JavaScript:
$(document).ready(function() {
$('.testClass').on('click', function(){
alert( $(this).data('associateid') );
});
});
Anytime you have an attribute that starts with data-, you can reference the string after the dash as a data container. Here, I'm calling jQuery.data() on an object (the LI) and asking for the data in the container associateID.
What you are currently doing:
$(".btnClass").click(function(){
console.log($(".testClass").attr("data-associateid"));
});
Will match the first instance of .testClass and print the data-associateid attribute. What you seem to want to do is to iterate over all .testClass and print their data-associateid values:
$(".btnClass").click(function(){
$(".testClass").each(function() {
console.log($(this).attr('data-associateid'));
});
});
Based on your updated HTML you would do this:
$(".btnClass").click(function() {
var id = $(this).parents('.testClass').attr('data-associateid');
console.log(id);
});
This will search the parents of the clicked on .btnClass to find elements with the class .testClass.
To get the data for that instance you simply need to traverse to the parent <li>.
Within an event handler, this is the element that the event occured on. Use closest() to access the parent <li>
$(".btnClass").on('click', function(){
alert( $(this).closest('li').data('associateid') );
});
Assign different classes to your li elements like this:
<ul class="notification-body" style="">
<li class="testClass1" data-associateid="AA01">test 1</li>
<li class="testClass2" data-associateid="AA02">test 2</li>
<li class="testClass3" data-associateid="AA03">test 2</li>
</ul>
Note, that I closed your li and ul tags to have valid HTML.
And then you can select an element with its own class:
console.log($(".testClass2").attr("data-associateid"));
I created a JSFiddle for you:
http://jsfiddle.net/8rLpbk5m/
I had hoped you could do it with just a find but apparently not. You have to use each to loop through all the elements.
$(".btnClass").click(function(){
$(".testClass").each(function() {
console.log($(this).attr('data-associateid'));
});
});
View it here: http://jsfiddle.net/rt677qp5/
Using .data() is more logical in this case.
$(".btnClass").click(function() {
$(".testClass").each(function() {
alert($(this).data("associateid"));
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="notification-body" style="">
<li class="testClass" data-associateid="AA01"></li>
<li class="testClass" data-associateid="AA02"></li>
<li class="testClass" data-associateid="AA03"></li>
</ul>
<button class="btnClass"></button>
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)