We Keep Coding

Get an anchor text value among multiple anchor's with same href

My html is
<a id='_requestOne' href='#applynow'> apply one </a>
<a id='_requestTwo' href='#applynow'> apply two </a>
<a href='#applynow'> apply three </a>
I want to change the anchor text for the second one alone. so I implemented in script as
$("a[href='#applynow']").text("request call");
Its changing all the three tags, so I tried as
$("#_requestTwo a[href='#applynow']").text("request call");
But its not working.
Can anyone give me a solution that how could I declare both id & href in same call.
Thanks in advance.

What you can do is target the second Item of the jQuery Object:
$( $("a[href='#applynow']")[1] ).text('request call') //starts counting at 0
I do not advise on this, it makes the code less maintenable if the html markup changes. You have an ID, so use that instead.
$("#_requestTwo").text('request call')
PS:
The reason why your second try doesn't work is because you had an error in the selector:
$("#_requestTwo a[href='#applynow']")
//should be
$("a[href='#applynow']#_requestTwo")

First select anchors with href then specify with ID or select directly by ID because ID should be unique:
$("a[href='#applynow']#_requestTwo").text("request call");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id='_requestOne' href='#applynow'> apply one </a>
<a id='_requestTwo' href='#applynow'> apply two </a>
<a href='#applynow'> apply three </a>
Always select elements from low to high specificity like:
$("tagname.class");

Apply javascript function on all data in table (which data is derived with python) [duplicate]

I am new to jQuery. I have the following code:
jQuery(document).ready(function() {
jQuery('#carousel').jcarousel();
});
It only applies to the first ul with id="carousel", not for the others. How can I apply it to all elements which have the same ID?
HTML:
<!-- jQuery applies to this div -->
<div id="slideshow-carousel">
<ul id="carousel" class="jcarousel jcarousel-skin-tango">
<!-- ... -->
</ul>
</div>
<!-- jQuery does not apply for this div -->
<div id="slideshow-carousel">
<ul id="carousel" class="jcarousel jcarousel-skin-tango">
<!-- ... -->
</ul>
</div>

The IDs for elements are supposed to be unique in the DOM. Having the same ID for two or more elements is not valid html. To share functionality across elements, assign them a common class, rather than giving them the same ID. If you can't assign them a common class, the workaround below will allow you to select elements with the same id attribute:
Using the same ID (If not possible to change ID)
jQuery(document).ready(function() {
jQuery('[id=carousel]').jcarousel();
});
Using a common class (Recommended way)
jQuery(document).ready(function() {
jQuery('.carousel').jcarousel();
});

You can't have more than one element with the same Id, that's why is not working. You should use class="caroussel" instead.
jQuery(document).ready(function() {
jQuery('.carousel').jcarousel();
});

In recent versions of jQuery, when you have multiple id's on the page, selector will return only the first 'id' that was found in the DOM. You should use class instead.

In this situation you should use class. You can not use id. Otherwise you can try the below code.
jQuery('ul').jcarousel();

get a href attribute and set this attribute to other div

I have 3 classes with such a structure (this is slider in my web app):
<div class="emotion--digital-publishing">
<div class="dig-pub">
<div class="bg--image">/div>
<div class="dig-pub--layer center center">
<div class="layer--wrapper">
<div class="layer--content">
<div class="dig-pub--button">
</div>
</div>
</div>
</div>
</div>
</div>
I want to get href attribute of a and set a href atribute with this url to dig-pub. It is very important to me that this is the link (which class I clicked), because 3 classes have different links.
I would like to use jQuery.

You bind a click event to your anchor tag. you'll need to assign a class to the anchor tag too if you have many on the page so replace 'className' with your class name. I'm not sure how you want to assign it to the div so I've done it as a data-attribute as this is the conventional way to go.
$('a.className').on('click', function (){
$(this).closest('.dig-pub').attr('data-href', $(this).attr('href'));
});

(Don't forget to close the div on line 3 in your snippet)
jQuery('.dig-pub').on('click', function() {
url = jQuery(this).parent().find('a').attr('href');
jQuery(location).attr(url);
});
https://codepen.io/Kidkie/pen/gdaJjZ

First, add an id to the link and the div (easier to fetch the elements)
<div id="dig-pub" class="dig-pub">
<a id="id" href="/wilson-camo"></a>
Then, get the href
var href = $('#id').attr('href');
Set the value to the div
$('#dig-pub').html(href);
However, you could have find this easily on JQuery documentation.

Attempting to toggleClass on div is failing

I'm trying to pull a toggleClass() on a class from an id element, e.g:
$('#create a').click(function(){
$('#create div').toggleClass('active');
});
and it doesn't wanna toggle the class active on the divider.
Here is the button:
<a href="#create" id="create" data-toggle="tab">
<i class="fa fa-plus" aria-hidden="true"></i>
</a>
and here is the class I'm trying to toggle active on:
<div class="" id="create">
<!-- Content Here -->
</div>

You have two issues here. Firstly #create a won't match any elements as the a element has that id, not a child element of it. You could instead use a#create or just #create.
Secondly you've duplicated the create id on both the a and the div, when id attributes must be unique within a page. You need to use another id value to identify the div element.
With those issues in mind, try this:
$('#create').click(function(){
$('#content').toggleClass('active');
});
.active { color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#create" id="create" data-toggle="tab">
<i class="fa fa-plus" aria-hidden="true">+</i>
</a>
<div class="" id="content">
Content here...
</div>

First, you should not have the same ID for more than one element.
Second, selectors don't work like you think: $('#create a') means "all A elements inside the element with the id = create". Just use $('#create'). You could use $('a#create'), which means "the A element with id = create", but that's unneccessary since id should always be unique.

Make sure you give a unique ids in your DOM.
And then your selectors are wrong.
They should be
$('#create').click(function(){
$('#creatediv').toggleClass('active'); // given new id to div
});
There is no need to mention the div as you have id in hand.

Use jQuery to target a class within a div and perform additional changes within the same div

I have the following HTML code:
<div class="pack1">
<a class="optionButton">First option</a>
<a class="optionButton">Second option</a>
<a class="optionButton">Third option</a>
</div>
<div class="pack2">
<a class="optionButton">First option</a>
<a class="optionButton">Second option</a>
<a class="optionButton">Third option</a>
</div>
<div class="pack3">
<a class="optionButton">First option</a>
<a class="optionButton">Second option</a>
<a class="optionButton">Third option</a>
</div>
[...]
<div class="pack10">
<a class="optionButton">First option</a>
<a class="optionButton">Second option</a>
<a class="optionButton">Third option</a>
</div>
Using jQuery I would like to trigger an event on clicking the a tag with the optionButton class but I don't know how to limit the event to the div that the a tag resides in.
For example right now I have something like:
$(document).ready(function(){
$('.optionButton').click(function() {
$(".optionButton").removeClass('checked');
$(this).addClass('checked');
});
});
It works fine for the first selection, lets say when I click the First option in the pack1 div, but if I make another selection, lets say Third option in the pack3 div, the first one will disapear.
Also, there must be only one selected option for each pach.

You need to narrow down the selection of your removeClass, as right now it's selecting every occurrence of optionButton.
$(document).ready(function(){
$('.optionButton').click(function() {
$(this).siblings('.optionButton').removeClass('checked');
$(this).addClass('checked');
});
});
This will narrow it down by selecting siblings of the clicked element that have the class optionButton.
JSFiddle
EDIT: Woops, put the wrong class in there. Should be patched up now.

Because exact DOM structure is highly subject to change, your best bet is to almost always go to the parent and search your way down like so:
1) $(this).parent().find(".optionButton").removeClass("checked");
or you can simplify the selector results set (and make your code slightly more efficient) by saying:
2) $(this).parent().find(".checked").removeClass("checked");
You can also use the selector context parameter like so:
3) $(".checked", $(this).parent()).removeClass("checked");
The difference between 2 and 3 is purely syntactic. jQuery will convert 3 into 2 behind the scenes

I think this could work
$(document).ready(function(){
$('.optionButton').click(function() {
var parent = $(this).closest("div");//getting the parent content
parent.find(".optionButton").removeClass('checked');//remove the checked
$(this).addClass('checked');
});
});