We Keep Coding

Nested function calls from the second click

I have multiple <li> elements. When I click to one of this, data from the chosen <li> should populate fields of form below. But my problem is when I click on the list of <li> tags it works from the second click.
<div class='js-delivery-addresses' id='delivery_addresses'>
<ul>
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
</div>
Js code:
events: {
"click .js-delivery-addresses": "chosenAddress"
}
chosenAddress: function() {
...some code here;
$('#delivery_addresses li').unbind().on('click', function() {
...other code that works from second click;
})
}
I expect it will work from the first click.

Is this not much simpler ?
$(document).on("click","#delivery_addresses ul li",function(){
alert($(this).val() + " = " + $(this).text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='js-delivery-addresses' id='delivery_addresses'>
<ul>
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
</div>

Javascript how to get list is on click on inner span

<li id="123">
<span id="tst">test</span>
</li>
I have the above code. I would like to get the li id on click on span id. Is it possible to do so?

Most easily to do with jQuery:
$('span').click(function() {
var parentId = $(this).closest('li').attr('id');
console.log(parentId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="123">
<span id="tst">test</span>
</li>
Or as plain vanilla js:
document.getElementById('tst').onclick = function() {
var parentId = this.parentElement.id;
console.log(parentId);
};
<li id="123">
<span id="tst">test</span>
</li>

Text not updating as expected using jQuery

I'm wondering if anyone could explain to me what is going on here?
var testNo = $("#test").text()
$("ul li a").click(function() {
$("#test").text($(this).text());
console.log(testNo)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
1
<ul>
<li>
<a href="#" >1</a>
</li>
<li>
2
</li>
<li>
<a href="#" >3</a>
</li>
</ul>
</li>
</ul>
It is strange to me why this wouldn't update the list item as you click using this method. However, if you change the javascript to;
$("ul li a").click(function() {
var testNo = $("#test").text()
$("#test").text($(this).text());
console.log(testNo)
})
It shows the value as one behind, but set the following as;
$("ul li a").click(function() {
$("#test").text($(this).text());
var testNo = $("#test").text()
console.log(testNo)
})
and it has the desired behaviour.
Is there a way to achieve what this last code snippet gives me, but by using the first code format?
Let me know something doesn't make sense,
thanks

You need to update the testNo variable text, then only it will show the latest text. Try:
var testNo = $("#test").text()
$("ul li a").click(function() {
testNo = $(this).text();
$("#test").text($(this).text());
console.log(testNo)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<ul>
<li>
1
<ul>
<li>
<a href="#" >1</a>
</li>
<li>
2
</li>
<li>
<a href="#" >3</a>
</li>
</ul>
</li>
</ul>

It's all about when you get the value of the $('#test').text() -- because you then go on to change the source value.
Your code does two things: (1) It reads #test and stores its value as testNo, and (2) it gets the text from the clicked anchor tag and puts that value into #test. So two things change: the var testNo and #test.
If you save the value of #test as var testNo, then change the value of #test before displaying testNo, they will have different values.
I think what you want to do is this:
$("ul li a").click(function() {
var testNo = $(this).text()
$("#test").text(testNo);
console.log(testNo)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
1
<ul>
<li>
<a href="#" >1</a>
</li>
<li>
2
</li>
<li>
<a href="#" >3</a>
</li>
</ul>
</li>
</ul>

In your first code testNo is set globally and take the value at page load in the second and 3th it is set locally so the value changes at each click event ,
In the second the value is incremented before the text is change so it captures the previous altered value, the 3th the value is saved after the text is saved so testNo is display the updated value

Need an element's parent index using jquery or javascript

I have three <ul>s that expand when their buttons are clicked. Not all three <ul>s will show up - only when there is a notification to show. I hard-coded the values for now, but I can instantiate them on an as-needed basis.
Right now, they cover each other when they expand. I would like the others to move when a list is expanded so they don't cover each other. I was thinking of getting the index of the one whose button is clicked and then resetting the bottom style of the others. I need to get the index of the <ul> parent of the button that was clicked, probably using jQuery but straight JavaScript is fine as well. Can anyone help?
Here is my code:
<div id="NotificationDiv">
<ul id="noticeLead" class="notification_base notification_Lead"><button id="notification_button">Lead Notice</button>
<div>
<li id="urlLead" class="notification_urlNotice notification_notice">
<a target="_blank" >Check Lead #1</a>
</li>
<li id="urlLead" class="notification_urlNotice notification_notice">
<a target="_blank" >Check Lead #2</a>
</li>
</div>
</ul>
<ul id="noticeTask" class="notification_base notification_Task"><button id="notification_button">Task Notice</button>
<div>
<li id="urlTask" class="notification_urlNotice notification_notice">
<a target="_blank" >Check Task #5</a>
</li>
<li id="urlTask" class="notification_urlNotice notification_notice">
<a target="_blank" >Check Task #6</a>
</li>
<div>
</ul>
<ul id="noticePolicy" class="notification_base notification_Policy"><button id="notification_button">Policy Notice</button>
<div>
<li id="urlPolicy" class="notification_urlNotice notification_notice">
<a target="_blank" >Check Policy #3</a>
</li>
<li id="urlPolicy" class="notification_urlNotice notification_notice">
<a target="_blank" >Check Policy #4</a>
</li>
</div>
</ul>
</div>
And in the $(document).ready, I have:
$('.notification_base').on('click', 'button', function(){
$(this).closest('.notification_base').find('.notification_urlNotice').slideToggle();
});

Try this:
var myParentId; //Here you'll store the id of the clicked element
$('.notification_base').on('click', 'button', function(){
$(this).closest('.notification_base').find('.notification_urlNotice').slideToggle();
myParentId = $(this).attr("id");
});

Thank you everyone for your input. I changed my structure to a table assigning .parent class to the header row and .child class to the data row and put this code in the jQuery ready function and it works great.
function getChildren($row) {
var children = [];
while($row.next().hasClass('child')) {
children.push($row.next());
$row = $row.next();
}
return children;
}
$('.parent').on('click', function() {
var children = getChildren($(this));
$.each(children, function() {
$(this).toggle();
})
});

jQuery: selecting LI's parent text

I have a classic root structure represented in HTML by ULs (and Lis ofc.). What I need to do is that when I click on any of my LI items (or in fact element as it contains only s) I want to get its text and text of its LIs parents.
Heres my sample of Unordered List (already wrapped):
<ul>
<li class='firstLevel'><a href='#'>1</a>
<ul>
<li><a href='#'>11</a>
</li>
<li><a href='#'>12</a>
</li>
</ul>
</li>
<li class='firstLevel'><a href='#'>2</a>
<ul>
<li><a href='#'>21</a>
<ul>
<li><a href='#'>211</a>
</li>
<li><a href='#'>212</a>
</li>
</ul>
</li>
<li><a href='#'>22</a>
<ul>
<li><a href='#'>221</a>
<ul>
<li><a href='#'>2211</a>
</li>
<li><a href='#'>2212</a>
</li>
</ul>
</li>
<li><a href='#'>222</a>
<ul>
<li><a href='#'>2221</a>
</li>
<li><a href='#'>2222</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class='firstLevel'><a href='#'>3</a>
</li><br>
<li class='firstLevel'><a href='#'>4</a>
<ul>
<li><a href='#'>41</a>
</li>
<li><a href='#'>42</a>
</li>
</ul>
</li>
</ul>
For example when I click 3, I get only 3, 'cause it has no parent. But if I click on 2222 element, I should get a 2222, 222, 22 and 2 output.
My thoughts were: First, I should get a level of ULs clicked, I've done this with this code:
$("li").click(function (e) {
var cnt = $(e.target).parents('ul').length;
});
In a cnt variable is stored level of plunge - so when I click on 2222 element, cnt = 4. (4 because root alredy returns a 1, not a zero.)
Next step is to get the texts of this parent elements. I tried to approach this elements with jQuerys .eq() function but it doesn't work correctly. Heres my test:
$("li").click(function (e) {
var cnt = $(e.target).parents('ul').length;
vat outputString = '';
cnt--;
for (var i = 0; i < cnt; i++) {
outputString += $(e.target).parents('li').eq(cnt).text();
outputString += '###'; //texts separator
}
});
But this approach returns all of LI item text (including his descendants) so it returns whole tree-text structure.
To summarize my question - What functions/how should I continue to get the desired output?
Heres a jsfiddle example: http://jsfiddle.net/F548m/1/

.text will always return the combined text of all descendants of an element. What you want seems to be the text of the a child of li element, not the text of the li element itself.
So with this in mind, this should do what you want:
$("li").click(function (e) {
var text = $(this).parents('li').map(function() {
return $(this).children('a').text());
}).get();
text.unshift($(this).children('a').text();
var outputString = text.join('###');
});
DEMO
This gets all the li ancestors of the clicked element and maps them to their a children's text value. Then it adds the text value of the clicked elements a children to the begnning of the array. The order of the values is from the clicked element up to root.
If you want it the other way round, i.e. the clicked element's value last, the code actually becomes a bit simpler:
$("li").click(function (e) {
var text = $(this).parents('li').addBack().map(function() {
return $(this).children('a').text());
}).get();
var outputString = text.join('###');
});

I think .parents() can help you
Check demo

You need to get the text of the a
var str=$(this).find("a:first").text();
$.each($(this).parents("li"), function (i, v) {
str+=", "+$(this).find("a:first").text();
});
alert(str);
e.stopPropagation();
http://jsfiddle.net/F548m/3/

you should use jQuery.closest() function.