We Keep Coding

Jquery dynamically selector

I want to select the child element of an ID that is evaluated dynamically in jquery, but the code is not working. Where do you think is the mistake?
data_id is dynamically.
$("#duplicater" + data_id + ".chat_box_right_button_collapse").toggleClass("show");

In your code there is no space between your dynamic id and class name(before dot). Please check this and compare with your one
$("#duplicater" + data_id + " .chat_box_right_button_collapse").toggleClass("show");

You can use template literals
$(`#duplicater${data_id} .chat_box_right_button_collapse`).toggleClass("show");

If your child element is the element with a class of chat_box_right_button_collapse, then try with a space for the CSS selector :
$("#duplicater" + data_id + " .chat_box_right_button_collapse").toggleClass("show");
If your child element is a direct child, you can also use the > selector :
$("#duplicater" + data_id + " > .chat_box_right_button_collapse").toggleClass("show");

Clicking list item creates a new list item with the original list item's text content

I have 2 ol, on click of an li in the first ol I create an li in the second ol. I would like to set the text content of the newly created li with that of the first, clicked li. Example: 'item 1'.
Here's my JQ:
$(document).ready(function() {
$("li").click(function() {
$(".secondlist").append('<li>placeholder</li>');
});
});
Here's my JS Bin
Thanks in advance for your help.

Use jQuery#append and then declare a text variable equal to the text of the clicked list item. You will be appending this value.
$("li").click(function() {
var current = $(this).text();
$(".secondlist").append("<li>" + text + "</li>");
});
Here is the updated fiddle
http://jsfiddle.net/vk80f7f5/1/

You can use one of this variants:
$("li").click(function() {
$(".secondlist").append($(this).clone());
//$(".secondlist").append('<li>' + $(this).html() + '</li>');
//$(".secondlist").append('<li>' + $(this).text() + '</li>');
});
and if you will use clone() you may not use '<li>' and '</li>'

Get table column by Jquery

I need to make "bold" the second column of this html table:
http://jsfiddle.net/beKC4/4/
How can I do using JQuery?
I tried this but is not working:
$("h3.ms-standardheader").children("td").text("<b>"+this.text()+"</b>")

you can also use css
see here http://jsfiddle.net/beKC4/6/
table tr td:nth-child(3){
font-weight:bold;
}

Use .html() instead
$(".ms-standardheader").closest('tr').find("td").html(function () {
return "<b>" + $(this).text() + "</b>"
});
Also, the selector is incorrect, you need to use closest, then find the <td>
DEMO
Or if you don't want ms-standardheader to also get <b> you can use siblings()
$(".ms-standardheader").closest('td').siblings("td").html(function () {
return "<b>" + $(this).text() + "</b>"
});
DEMO

You can use this. Create a css class and add this class with js using :nth-child(). Think is simplier.
css
.bold{
font-weight: bold;
}
js
$('table td:nth-child(3)').addClass('bold');
fiddle

http://jsfiddle.net/b4AwC/
I would use nthchild selector, if you want ever other one bold you can put in even or odd
I hope this help
$("tr td:nth-child(2)").css({"color":"red"});
$("tr td:nth-child(even)").css({"background":"grey"});

jQuery return only <li> element text

I have added an .on() function to my dynamically added list elements with jQuery. The problem I'm facing is that the button that triggers the click lives inside the dynamically added li elements and therefore
$(this).parent().text()
returns the text from the li element as well as the button's text.
See the following fiddle: http://jsfiddle.net/TL5TR/
How can I get around this problem and only display the li text (without the button text)? Would I have to rework my code in a way that button will be placed outside the li tag?
Update
Before I accept one of these answers -- all of them which are working by the way, so thank you, can you also explain to me what are the pros/cons of using one method or the other - i.e. textNode vs span tag.

I think the easiest solution would be to add span around your text:
$('#list').append("<li><span>" + item + "</span><button class='clickme'>Click me</button></li>");
And then:
$(this).siblings("span").text()

If the textNode is the previous sibling of the clicked button you can use previousSibling property.
$("#list").on('click', 'button', function() {
alert(this.previousSibling.nodeValue);
});
http://jsfiddle.net/cZk8H/

var array = ["First", "Second", "Third"];
$.each(array, function(index, item) {
$('#list').append("<li><span>" + item + "</span> <button class='clickme'>Click me</button></li>");
});
$("#list").on('click', 'button', function() {
alert($(this).parent().find("span").text());
});
put the text in a span tag
http://jsfiddle.net/TL5TR/2/

Try Adding text wrapped in a span. And you should easily address the sibling's value, later:
var array = ["First", "Second", "Third"];
$.each(array, function(index, item) {
$('#list').append("<li><span>" + item + "</span><button class='clickme'>Click me</button></li>");
});
$("#list").on('click', 'button', function() {
alert($(this).siblings().text());
});
http://jsfiddle.net/TL5TR/1/
PROS (of using span) : Better Management of text inside the li. You actually refer to the content enclosed in the span always....
PROS(of not using span) : Lesser tags in the HTML that you need to take care of. Although in this case I would say it's more of a micro management to think about it.

Or instead of separating it out, you could just do this:
var array = ["First", "Second", "Third"];
$.each(array, function(index, item) {
$("<li>" + item + " <button class='clickme'>Click me</button></li>")
.appendTo('#list')
.on('click', function() { alert(item); });
});
Unless of course you are adding these some other way. Then I would use one of the other suggested answers.

You can clone the element and remove the children elements:
$(this).parent().clone().children().remove().end().text()

for loop returning individual letters of one item in array and not each item in the array

I have to arrays that I have made. One grabs some anchor tags and the other a set of ul's. The anchor tags all have a name attribute and the ul's have id's that match the anchor tags name attribute. In addition to this, all the ul's have the class ".students" and ".hidden". (all the .hidden does is set the display:none)
<div>
<ul>
<li><h4><a name="5th-grade">5th Grade</a></h4></li>
<li><h4><a name="6th-grade">6th Grade</a></h4></li>
<li><h4><a name="7th-grade">7th Grade</a></h4></li>
<li><h4><a name="8th-grade">8th Grade</a></h4></li>
</ul>
</div>
<div>
<ul id="5th-grade" class="students hidden ">
<li>Billy Bob</li>
</ul>
<ul id="6th-grade" class="students hidden">
<li>Bob Sackamano</li>
</ul>
<ul id="7th-grade" class="students hidden">
<li>Matt Blunt</li>
</ul>
</div>
What I am trying to do is have it so when I click on one of the anchor tags, it will match it's corresponding name attribute to the ul with the same id, make it appear by removing the ".hidden" class, and then hide any other ul's that do not match by adding the ".hidden" class.
Here is what I have come up with so far using a little jquery and where I stopped:
var aGradelist = $('#grade-list ul li a');
var aStudents = $('.students');
aGradelist.click(function(){
var i = '#' + $(this).attr('name');
$('.students'+i).removeClass('hidden');
for(var j=0;j<aStudents.length;j++)
{
console.log(aStudents.attr('id')[j]);
}
});
It's no problem getting the correct ul's to appear, but I couldn't add the ".hidden" class to the other ul's. I consoled it found that at least one of my problems is in the for loop, I am not going through each ul's in the aStudents array, but through the letters of the id of the first item in the aStudents array.
Am I even approaching this the right way? Have you got some ideas of how to do this?

Provided your html is valid (no duplicated IDs) this should do the trick.
var aGradelist = $('#grade-list ul li a');
var aStudents = $('.students');
aGradelist.click(function() {
aStudents.addClass('hidden');
$('#' + $(this).attr('name')).removeClass('hidden');
});
jQuery iterates over the DOM elements out of the box when you call methods on it.
Also, if you want to know what was wrong with your initial loop, you should use [j] before retrieving the id attribute which is a string. So to retrieve the id property properly:
for(var j=0;j<aStudents.length;j++) {
console.log(aStudents[j].id);
}
$()[j] is a shorthand for $().get(j) (jQuery.fn.get docs).

Try this:
var aGradelist = $('#grade-list ul li a');
var aStudents = $('.students');
aGradelist.click(function(){
var i = '#' + $(this).attr('name');
aStudents.addClass('hidden');
$('ul' + i).removeClass('hidden');
}
What this does is add the hidden class to all the uls and then remove it only from that ul which has the id of the anchor that was clicked