We Keep Coding

jquery catch previous class issue

My html is
<input type="text" class='myclass' value="start">
<div>
<input type="text" class='myclass' value="sea">
</div>
<button class="mybutton">Catch</button>
<br/>
<input type="text" value="end" class='myclass'>
and javascript is
$('.mybutton').click(function(){
var text = $(this).prev('.myclass').val();
console.log(text);
});
I want to get the value of immediate previous input value by class name. but the result is undefined.I want to get the value sea. Where is the problem? the working fiddle link is Here >> Thank you.

Immediate previous element of catch button is a div, so you need to do a find() inside that
like this:
$('.mybutton').click(function(){
var text = $(this).prev('div').find('.myclass').val();
console.log(text);
});

I want to get the value of immediate previous input
Well, that's the problem, input is not immediate. you can use prevAll method instead:
$('.mybutton').click(function(){
var text = $(this).prevAll('.myclass').val();
alert(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class='myclass' value="start">
<div>
<input type="text" class='myclass' value="sea">
</div>
<button class="mybutton">Catch</button>
<br/>
<input type="text" value="end" class='myclass'>

Interesting. I have never used the ".prev()" function before. Anyways:
If you read here https://api.jquery.com/prev/ you will find:
"Given a jQuery object that represents a set of DOM elements, the .prev() method searches for the predecessor of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements."
Also:
If no previous sibling exists, or if the previous sibling element does not match a supplied selector, an empty jQuery object is returned.
So in other words, as has been mentioned before, the ".prev()" simply looks for the previous element.
To do what you want to do in the way you want to do it you might want to consider the ".prevAll()" function that is explained here: https://api.jquery.com/prevAll/
But then again since the element you want is actually a child of the previous element and not a direct sibling you might want to consider Beginners' suggestion:
$('.mybutton').click(function(){
var text = $(this).prev('div').find('.myclass').val();
console.log(text);
});
But in fact you should be able to make it slightly simpler by removing the 'div' selector:
$('.mybutton').click(function(){
var text = $(this).prev().find('.myclass').val();
console.log(text);
});
As long as you are certain that your '.myclass' element will be a child of the previous element this should work irregardless of what the parent element is (div, span, whatever)

jQuery Selector Confusion

I have the following code..
<span class="under">
texthere
<ul class="list">
<li> list text here</li>
</ul>
</span>
When i run $(".under").text() I get "textherelist text here" .
I've tried $(".under :not(.list)").text() and get underfined.
I also dont get the correct output for $(".under").not(".list").text()
So my last attemp was $(".list").parent().text()
which results in textherelist text here
Where am i going wrong with something so simple?
p.s. doesn't have to be jQuery can be JavaScript if its simpler.
Wanted result: texthere

So I'm guessing you're after the text : texthere ?
var elem = $(".under").clone(),
text = $.trim(elem.children().remove().end().text());
FIDDLE
Clone the element, remove all children elements and get the remaining text.
​

From the docs:
Description: Get the combined text contents of each element in the set
of matched elements, including their descendants.
So yes, that behavior is expected.
You can try this to get only the immediate text node of a selector:
$('.under').contents().filter(function(){ return(this.nodeType == 3); }).text()
Explanation:
.contents() (docs) returns the children of a selector, including textnodes
Description: Get the children of each element in the set of matched
elements, including text and comment nodes.
.filter() takes a callback to return only things you need, based on this, you are only taking those with nodeType == 3, which is a text node.
http://jsfiddle.net/R4Pzf/

Here you go:
var text = $('.under').contents(':not(.list)').text();
Example:
http://jsfiddle.net/ak4FU/1/

inserting a variable on style tag

I need to change the color of the text based on the drop down list selection.
<select id="room2">
<option>#0808cf</option>
<option>#0E9E26</option>
</select>
<input type="text" id="txtColor">
John: <p style="color:#0808cf" > test </p>
jquery
$('#colors').change(function(){
$('#txtColor').val($("#colors").val());
var fontColor = $('#txtColor').val();
});
I dont want the change to be in the css cause the select id will not be constant. I want it to be inserted in the p style tag. And also i need the text to be John: test to be in one line. I tried this but not working. Thank you.
<p style="color:"+fontColor+" > test </p>
demo: http://jsfiddle.net/kX3EN/

Try - http://jsfiddle.net/kX3EN/7/
$('#colors').change(function(){
$('p').css( 'color', $(this).val() );
});

If you want your "John: test" to be on the same line, you need to:
Change the p (block-level) to something like a span (inline) or
Force the p to act as inline with css (display: inline).
Using jQuery, you need to use the css() function to change the style attribute of an element. Like so:
$('selector for element you want to change').css('color', $("#your-select-element").val());
You'll probably put this in an event handler for your select:
$("select#colors").change(function() {
$("span.changemycolor").css('color', $(this).val());
// 'this', in this case, is your select element
});

got it working by placing the tag after my html code filter. So everytime I append a message will be stored as variable and read as JS when the var is sent to the websocket send method. Thank you

jQuery creating and modifying elements

I'm using an HTML snippet to insert some text into the element, then display it somewhere:
var elemTemp = $('<span /><strong class="value unit" />').find('span').text('hi!').end();
elemTemp.appendTo('#someDiv');
I want to insert "hi" inside the span but could not get it working. The find() method doesn't seem to find the span.

find looks down the DOM tree, but your span is not a descendant, so find won't find it. Use siblings instead:
var elemTemp = $('<span /><strong class="value unit" />').siblings('span').text('hi!').end();
Here's a working example. Note that this produces HTML along the lines of:
<span>hi!</span>
<strong class="value unit"></strong>
I'm not sure if you were aiming for that, or if you wanted the strong to be a child of the span.

Why not do this as simply and quickly as possible?
$('#someDiv').append('<span>hi!</span>'); // or whatever HTML you want in there

You have to specify which span-tag you want to insert "hi" into. The easiest way is to set a class on the span-tag.
HTML:
<span class="hello"></span>
jQuery:
$('span.hello').html('hi');

jquery selector - Select value not inside another nested tag

Is it possible to select the value of a tag which is not inside another nested tag?
For example in the following code I want to get ' Text I want to select' from $('#example').
<td id="example">
<a> Text I don't want to select</a>
<span> Other text I don't want to select</span>
Text I want to select
<anyOtherTag> Other text I don't want to select</anyOtherTag>
</td>
Thanks.

You can use .contents() and .filter() down to text node types (nodeType == 3), like this:
var text = $("#example").contents().filter(function() {
return this.nodeType == 3;
}).text();
alert($.trim(text));
You can try it out here. since .text() gets all text nodes, including the other whitespace, you probably want to $.trim() (since IE<9 doesn't have String.trim()) the result like I have above.