We Keep Coding

How to select all elements that ends with certain id

Edit: let me reformulate this question
How to select all elements that ends with certain id
Ex:
<input id="person">
<span id="span_person"></span>
<input id="person_001">
My problem is, when I select with jQuery like
$("[id*=person]");
all inputs with similar id's are returning but in this case I just want to select the first two. I want to select all elements that the id ends with "person". Is there any way?
I use a framework that generates html code, so I can't change the id of the elements because it's based on the attribute name on the framework.

Use the $ operand for CSS selectors
[attribute$=value]
$("[id$='person']");
eg. Selects every element whose attribute value ends with value

An id is supposed to be unique. You should use a class to group elements you want to style with similar CSS, something like '.person'. Refer to: https://www.w3schools.com/html/html_id.asp

ID is only! You can't set ID for 2 tags!
I should change your span's id!

Select div after parent with jQuery

<div class="col-1-3">
<div class="click"></div>
</div>
<div class="col-1-3">
</div>
<div class="col-1-2">
</div>
Using jQuery, I need to select the col-1-2 div when a user clicks on the "click" div. I need to replace col-1-2 with col-1-3. So far, I have tried a variety of methods using parent();, next();, find(); etc. etc. Right now, I looking into:
$(".click").parent().next(".col-1-2").removeClass("col-1-2").addClass("col-1-3");
That obviously doesn't work but I am not sure where to go from here.

next will only look at the immediate next element. You need to use nextAll to test all the following siblings.
Using this instead of a selector will make sure that you are dealing with the div that was actually clicked rather than another one with the same class name.
$(this).parent().nextAll(".col-1-2").removeClass("col-1-2").addClass("col-1-3");
You may also wish to filter the results to apply the change to only the first match.

One more slightly shorter version:
$(this).parent().siblings(".col-1-2").toggleClass("col-1-2 col-1-3");
$.fn.toggleClass can be used instead or combination of removeClass + addClass: col-1-2 will be removed and col-1-3 will be added.

Error in changing label values

I have the following piece of code ( generated from the jquery datatables plugin)
<div class="dataTables_filter" id="DataTables_Table_0_filter">
<label>Search:
<input type="text" aria-controls="DataTables_Table_0">
</label>
</div>
I want to manipulate the label text and have written the following piece of code ,could someone point out where I am going wrong .
$("#DataTables_Table_0_filter").closest("label").html("filter");

That'll not work. closest() looks up the hierarchy of DOM elements. You can use find() as in the following code:
$("#DataTables_Table_0_filter").find("label").html("filter");
This will however remove the <input> element from within the <label> as well. You'll have to add the code for the <input> element to the string passed to the html() function.

Perhaps $("#DataTables_Table_0_filter").find("label").html("filter");

You don't need to use closest as label is inside div
you can do this way -
$("#DataTables_Table_0_filter label").html("filter");
or if you have multiple label's and want to access first one -
$("#DataTables_Table_0_filter label:first").html("filter");

JQuery "#id.class" Selector Mashup

I have some bullet points which I want to show more text below them on clicking them. They are both two separate Ps that are paired together by sharing a common id. So, what I am trying to do below is to find the element with (id_same_as_this.class), so that the element with the class "expand" as well as the id that matches the clicked on P is toggled. Does that make sense?
$(document).ready(function(){
$(".expandable").click(function(){
$(this.attr('id')+"."+"expand").toggle(800);
});
});
I only ask if the above code could be made to work because it would make the expandable bullet points in my web page significantly less code intensive than a lot of the examples I have read about.

$(this.attr('id')+"."+"expand").toggle(800);
Must be
$("#" + this.id +".expand").toggle(800);
You missed the # there. That said, you shouldn't ever have a common ID. By definition IDs are meant to be unique. If you have the same ID on multiple elements, while it may work now on the browsers you try, you have no guarantee it won't break in the next rev of jQuery (or Chrome, or Konqueror, or iOS Safari). There's also no reason to do it. You could just use classes or data-* attributes.

Yes this will work but you need a # before the ID

They are both two separate Ps that are paired together by sharing a common id.
IDs are unique. Two elements can't share a common ID, as that defeats the whole purpose of having a unique identifier. JavaScript assumes that you're using valid HTML, so document.getElementById() will return only the first element with a matching id. By using non-unique IDs, things will start breaking in unpredictable ways:
$('#foo').find('.bar') // Won't search past first #foo
$('#foo .bar') // Will search past first #foo in IE8+
Try restructuring your HTML to make this task easier. Maybe you could do something like this:
<ul id="bullets">
<li>
<h2>Title</div>
<div>Text</div>
</li>
</ul>
And then use a simple event handler:
$('#bullets h2').click(function() {
$(this).next().toggle(800);
});

You don't need id values for this at all (which is good, as from the comments on hungerpain's answer, you're using the same id value on more than one element, which is invalid).
Just do this:
$(document).ready(function(){
$(".expandable").click(function(){
$(this).find(".expand").toggle(800);
});
});
That will find the element with the class expand within the expandable that was clicked. No relying on unspecified behavior of selectors.
If you really need that data on the expandable, just put it in a data-* attribute. So instead of this invalid structure:
<!-- INVALID -->
<div id="foo27" class="expandable">
<div class="expand">...</div>
</div>
<div id="foo27" class="expandable">
<div class="expand">...</div>
</div>
Do this
<!-- VALID -->
<div data-id="foo27" class="expandable">
<div class="expand">...</div>
</div>
<div data-id="foo27" class="expandable">
<div class="expand">...</div>
</div>
Use the above code to do the expansion. If you need the value, use .attr("data-id") or .data("id") to get it.

How to change the element with no ID in jquery?

The HTML codes are like this:
<div id="select1_chzn" class="chzn-container chzn-container-single" style="width: 250px;">
<a class="chzn-single chzn-single-with-drop"
href="javascript:void(0)" tabindex="-1">
<span>AFF5</span>
<div></div>
</div>
I was wondering how I could change the <span>AFF5</span> to <span>Another</span> in jquery.
Does anyone have ideas about this? Thanks!

Could use the id of it parent
$("#select1_chzn span").text("Another");
UPDATE
Using > means direct descendant where as a space means descendant not necessarily direct.

Use the CSS selector
#select1_chzn span
I am not jquery person, but I have seen enough questions here on SO to guess that you would use
$('#select1_chzn span')

$("#select1_chzn span").text("Another");
Simple use of a standard CSS descendant selector should do in this case.

parent child, like this:
$("#select1_chzn span").text('Another');

The title says "How to change the element with no ID in jquery?"
If you want to target all spans with no ID within the div #select1_chzn, you could do
$("#select1_chzn span:not([id])").text(...);
It seems like you want the last span:
$("#select1_chzn span:last").text(...);

You can use any available css-selector for selecting jquery objects, for example this should work:
$('span').text('Another');

You can actually search for spans based on their contents if that is the only way you have of identifying them.
​$("span:contains(AFF5)").text( "Another" );
However, this is case sensitive.