Develop Reference

how to find first row first anchor tag in jquery?

I am trying to find first row first anchor tag in jquery ?
I have 4 rows .I want to get first row anchor tag. I tried like this
https://jsbin.com/woxatuxoju/edit?html,js,output
$(()=>{
console.log( $('a[title=" Nominal"]')[0])
$('a[title=" Nominal"]')[0].css({'background-color':'red'})
})
but not able to find correct element.

$('a[title=" Nominal"]')[0] returns the DOM object of element and not the jquery object. Due to this .css () method is not applying the changes.
You should use .eq() selector to get jquery object of element by its index:
$('a[title=" Nominal"]:eq(0)').css({'background-color':'red'});
Using Javascript:
document.querySelectorAll('a')[0].style.backgroundColor = 'red';
Working Demo

How to dynamically replace part of a class using jQuery?

I have a dynamic class that starts with z-. How can I dynamically change z- into fa- onload?
From Link
to Link
I only want to replace a part of the class, not the whole class.

You could use an attribute contains selector and call attr with a callback function to modify the attribute for each element. In my example, I use a the string replace method with a regular expression to ensure that all classes in the list that start with z- are replaced, and only those instances of that string. Then just wrap it in the jQuery document ready wrapper, and you are ready to go.
$(function(){
//Select only the a tags with "z-" in the "class" attribute, and modify the attribute using a callback function.
$('a[class*="z-"]').attr('class', function(index, attr) {
//Return the updated string, being sure to only replace z- at the start of a class name.
return attr.replace(/(^|\s)z-/g, 'fa-');
});
});

$(document).ready(function(){
var self = $("a.z-dynamic");
self.attr("class", self.attr("class").replace("z-", "fa-"));
});
This will change
From Link
to Link

If you have a reference to that node already, you could easily apply a little regex alongside .replace() to the className.
anchor.className = anchor.className.replace(/z-/, 'fa-');

Select a div insinde another div with jQuery

So I try to select a div within another div. My html goes like this:
<div id="Stage_game_page1"><div id="cube0">[...]</div><div id="cube1">[...]</div></div>
I want to select my #cube0 within my Stage_game_page specifically, with jQuery or JS.
The goal of the selection is to use it in an loop.
I tried :
var count =$("#Stage_game_page").children().length;
for(i=0; i<count;i++){
$("#Stage_game_page")$("#cube"+i)[...]
}
I don't understand what I'm doing wrong.

var count =$("#Stage_game_page").children().length;
for(i=0; i<count;i++){
$("#cube"+i);
}
This is sufficient to select the "#cube0"/"#cube1"/"#cube2" etc. especially since ids are always unique. To answer the question $("#cube0", "#Stage_game_page")... that is how you select a div in another div

The id attribute should only be used once! I see above that you're using id="cube0" twice. If you want your divs to be recognized in multiple instances, use a class instead (the . instead of the #). Using the same id twice will probably break your script.
I believe for your html, you could use id "cube0", "cube1", etc., as long as you're ok with entering them manually. That should work for the loop you'd like to use.

Loops through each div that starts with the id cube inside Stage_game_page1
$("#Stage_game_page1 > div[id^='cube']").each(function () {
alert($(this).html());
});
JSFiddle
Child Selctor
Starts with Selector

use each() for loop.
$('#Stage_game_page1').children().each(function(index) {
// your code here with index starts from 0
});
or this using jquery attribute starts with selector
$('#Stage_game_page1').find('[id^="cube"]').each(function(index) {
// your code here
});

You need to use .find() or .children() or the like.

The correct jQuery usage would be
$("#Stage_game_page").find('#cube'+i)
to find a div with that id inside the container #stage_game_page

You have duplicate cube0 in your html code..
and i think the look should contain something like that:
$("#cube"+i)[...]

One another solution is:
$("#Stage_game_page1 div[id='cube0']")

Jquery select previous element

I am new to Jquery and I've had a look through the replies on here but I can't find any specific answers to my question.
I have a (ASP) generated table a snippet of which is:
<a href="javascript:__doPostBack('gv2','Select$15')"
style="color:White;">S</a></td><td style="font-size:XX-Small;">1104</td>
<td style="font-size:XX-Small;">320.20.0116.090</td>
<td style="font-size:XX-Small;">*Not Found*</td>
What I'm trying to do is highlight the *Not Found text and then disable the preceeding href so the link cannot be clicked.
I have developed the following selector:-
$('td').highlight('Not Found').each(function(){$(this).prev("a").removeAttr("href")});
The highlight selector works but the removeattr doesn't. Syntax is probably incorrect but any pointers would be very useful.
Answered:- This works
$("td:contains('*Not Found*')").each(function(){$(this).parent().find('a').removeAttr("href")})

I'd personally suggest:
// selects all 'td' elements
$('td').filter(function(){
// retains only those whose text is precisely '*Not Found*'
return $.trim($(this).text()) == '*Not Found*';
// moves to the closest (ancestor) 'tr'
// finds the 'a' element within that 'tr' element
// sets the 'href' attribute to be equal to '#'
}).closest('tr').find('a').attr('href','#');
JS Fiddle demo.
Alternatively, rather than setting the href to #, you could just remove the a element by unwrapping its contents:
$('td').filter(function(){
return $.trim($(this).text()) == '*Not Found*';
}).closest('tr').find('a').contents().unwrap();
JS Fiddle demo.
References:
attr().
closest().
contents().
filter().
find().
jQuery.trim().
text().
unwrap().

try $(this).prev().find("a").removeAttr("href")}
also removing the link might not work.
try replacing the href with #

jquery .each() loop

i want to read all links in ".vm-video-title"-divs and post them each in the same div. So i made this script:
$('.vm-video-title').each(function(i) {//all divs
$(this).html($(this).html()+$("div.vm-video-title>a").text());//add to div the link
});
but i have the problem that it reads ALL the links of all divs and put them in one div.
example:
<div class="vm-video-title">Text1</div>
<div class="vm-video-title">Text2</div>
<div class="vm-video-title">Text3</div>
output:
Text1Text1Text2Text3
Text2Text1Text2Text3
Text3Text1Text2Text3
wanted output:
Text1Text1
Text2Text2
Text3Text3

You can select the <a> elements directly, and use the after()[docs] method to append the content of each after each one respectively.
$("div.vm-video-title > a").after(function() { return $(this).text(); });
This doesn't do a "destroy then recreate" of the existing elements like the html()[docs] method will.
Working example: http://jsfiddle.net/CCr9C/

This should do the job for you,
you need to find the div inside current element in the loop (el).
$('.vm-video-title').each(function(i, el) {
el = $(el);
el.html(el.html()+el.find("a").text());
});
in your code you are adding text() of all matching "a" tags in your divs (i.e. Text1Text2Text3)

You were almost there. Instead of : $("div.vm-video-title").text(), which gives you text inside any div with class vm-video-title, you need to find a tag inside current div and get text from it. We pass this as context for selecting a inside current div jQuery( selector, [context] )
$('.vm-video-title').each(function(i) {//all divs
$(this).html($(this).html()+$("a", this).text());
});