We Keep Coding

Can I use jquery to operate the name attribute of <a> tag？

In my web I have more than 5 links,some of them are in the same group. I want to make them hide or show together.So I give the same name to the common link.But How to operate them?
<a href='a.jsp' name='group1'>aa</a>
<a href='b.jsp' name='group2' >bb</a>
<a href='c.jsp' name='group1'>cc</a>
<a href='d.jsp' name='group2'>dd</a>
<a href='e.jsp' name='group1'>ee</a>
If use input,I can write like $("input[name='group1']").hide();.But now is link tag.How to operate them?

Classes are our friend - forget trying to use a name attribute - this is not the correct use for that. What you want to do is add a class and then alter the display based on the class:
//HTML
<a href='a.jsp' class='group1'>aa</a>
<a href='b.jsp' class='group2' >bb</a>
<a href='c.jsp' class='group1'>cc</a>
<a href='d.jsp' class='group2'>dd</a>
<a href='e.jsp' class='group1'>ee</a>
//js
$('.group1').hide();
you can also add css in the jquery
//js
$('.group1').css('display','none');
but the better way of altering the display state is to have a class that you then add or remove to the elements - that way you are not altering the actual css of the element:
//css
.hidden {display:none}
.shown{display:block}
//js
$('.group1').addClass('hidden');
you can also toggle the class - which allows you to show the elements simply by not hiding them
//js
$('.group1').toggleClass('hidden');

You can select all of the anchor tags with this the same code as you would use for input, but you just specify that you want to select the <a> tags, and then you can call the method hide().
$("a[name='group1']").hide()
The [name='name'] part of the code is called CSS attribute selector, and it can be used with most HTML tags.
See this:
https://css-tricks.com/almanac/selectors/a/attribute/
And this:
https://developer.mozilla.org/cs/docs/Web/CSS/Attribute_selectors
Although when doing something like this, it would be much better to use classes.

Distinguishing between two same HTML ID elements using Jquery and css in Wordpress

I know that is a bad practice to have more than HTML elements having same ID. However such is my situation where I need to specifically modify either of them.
I researched around and found about Jquery method 'document.getElementByID' that returns with the first similar element and lets you change it using css. Using that I wrote the code below but it doesn't work.
$(document.getElementById('it_trending-3')).css({"display":"none"});
I have added this code in my wordpress theme using the CSS-JS-PHP wordpress plugin, created a shortcut from the same and then added the shortcode. Can someone please guide me what and where I went wrong?
Also feel free to suggest a different function that would maybe let me specifically point to each of the same ID elements using maybe indexes. Thanks!

Keep a class to the divs you want to change:
<div>
<span id="a" class="test">1</span>
<span id="b" class="test">2</span>
<span>3</span>
</div>
The Jquery would go like this:
$(function() {
var w = $("div");
console.log($('#a').length);
console.log($('body #a').length);
console.log($('#a', w).length);
});
$(".test").first().css({"color":"orange"});
//or
$(".test:first").css({"color":"orange"});
But if you want to select any specific element with the class via an index of sorts, then you would need to do it like this:
var x = $(".test");
$(x[1]).css({"color":"orange"});

You can achieve this in 2 ways.
Based on element's hierarchy or based on class attribute / custom data attribute to the element.
In the below example we have 3 span elements with the same id and we have to apply 3 colors to each of those span elements.
HTML
<div>
<span id="it_trending-3">
Applying css to same Id with hierarchy (span in 1st div)
</span>
</div>
<div>
<span id="it_trending-3">
Applying css to same Id with hierarchy (span in 2nd div)
</span>
</div>
<br /><br /><br />
<span id="it_trending-3" class="testcls">
Applying css to same Id with class
</span>
Applying css using js / jquery based on element hierarchy
JQuery
(function($){
$("div:last #it_trending-3").css("color", "red");
$("div:first #it_trending-3").css("color", "green");
})(jQuery);
Based on class attribute / custom data attribute to the element.
JQuery
(function($){
$("#it_trending-3.testcls").css("color", "blue");
})(jQuery);
JS Fiddle Demo

jQuery change innerHTML of link based on href

I have the following html generated by a CMS for a tabbed element:
<li class="active" style="width: 233px;">
Open Tickets
</li>
I want to change the link's text of "Open Tickets" to other text, but I only know the link's href.
How can I do this with jQuery? Thanks!

$('a[href="#tabopen_tickets"]').html('your new value');

Try
Attribute Equals Selector [name="value"]
$('a[href="#tabopen_tickets"]').text('Changed');
$('a[href="#tabopen_tickets"]') will select the a tag with href attribute #tabopen_tickets"

You can use:
$('li.active a').text("new text here");
if you want to get it by href then use attribute equal selector:
$(a[href="#tabopen_tickets"]).text("new text here");

You can select link with jquery that contains, start or end with some text like this
var link = $('a[href*="#tabopen_tickets"]') and
then change the link text like link.innerHTML("new text");
Documentation can be found here

Is there a way to change the color of a specific text

I'm on a site where I wanted to change my username color with javascript. I was able to change the background with getElementById but i cant seem to change the color of specific text without changing the whole page text color. Is there a way to use getElementById to change a specific text on the page?

Well, you could simply have each username enclosed within a <div> tag with an id of that user's id. And reference it that way with document.getElementById(). style.color

See this demo
<div> This div <span id="sp1">elements</span> have <span id="sp2">different</span> colours </div>
document.getElementById('sp1').style.color = 'green';
document.getElementById('sp2').style.color = 'red';

getElementById only gets the whole HTML element which contain the specific ID. So if you wish to style on the specific bunch of text inside that element, you can use inline elements for the specific text. For example:
<div id="text">
Some text with <span>your name</span> here.
</div>
Simply use CSS to style it rather than JavaScript:
div#text span {
color: blue;
}

This is possible only if you have the text wrapped by a node. Use span tag to contain the desire text. Include a class for the span like this <span class="username">user name here</span>. Then use in your CSS stylesheet :
span.username{
color : your.desired.color ;
}
I recommend you learn CSS if you are making a site. Is the best! If you don't want to use CSS you can just write <span style="color:red">user name here</span>. It will display the user name in red.

You can do something like this:
document.getElementById("id").style.color = "red";
DEMO: JSFiddle

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