Why Does Jquery Only Affect the First Div Element

Why does Jquery only affect the first div element?

You have duplicate ids, Which is invalid and also jQuery ID selector(or any other id selector like document.getElementById which internally jQuery uses because element with ids are indexed by most browsers and are meant to be unique) will return only the first one that appears in DOM. Change it to class and see it working:

$('.comment').each(function() { 
     var thz =  $(this); var repl =
     thz.html(thz.html().replace(/\D+/g, '')); 
});

HTML

<a class="comment1" href="#"> c2fđf011. </a> 
<a class="comment1" href="#">c20ff113. </a> 
<a class="comment1" href="#"> c201gf76341. </a>

By the way had your id been like this:-

<a id="comment1" href="#"> c2fđf011. </a> 
<a id="comment2" href="#">c20ff113. </a> 
<a id="comment3" href="#"> c201gf76341. </a>

Starts with Attribute selector will help you (But slow you down literally, since this is an attribute selector and lose the advantage of using IDs).

$('[id^=comment]').each(function() { // While using this better give a container context $('[id^=comment]', 'container').each(function...
    var thz = $(this);
    var repl = thz.html(thz.html().replace(/\D+/g, ''));
});

Demo

Moral: IDs must be unique

jQuery script only affects first DIV in my page?

if you want to affect multiple elements use class referencing rather than divs.

change this line

$("#price").digits(tempText);

to

$(".price").digits(tempText);

since classes are used for collection of elements and divs are used to reference only one item at a time... so it fetches the first div only.

and remember when using $('.price') you have to use a loop rather.. since they are many of them.. so your code becomes

$.each('.price', function(o, v){
   var tempText = $.trim($(this).text());
   tempText = tempText.substr(0, parseInt(tempText.length) );
   $(this).digits(tempText);
});

all things being equal, this should work...

JavaScript function only affects first div with class

$thing is a collection of elements, like you want, but the problem here is that you ask specific attributes from $thing like offset().left;, which can not return more than one number, therefor it just takes the first. What you should do instead is use an .each() function to loop over all the elements in $thing.

$thing.each( function( index, element ){
    //your code for each thing here
});

Why does Jquery only select the first element with some methods and all elements with other ones?

As Adeno confirmed, some jQuery methods only work on the first element in a collection which is why I was only able to pause the first video but not subsequent ones while the .css() method worked on all video elements.

To get all videos to pause, use the following code:

$('div.carousel-inner video').each(function(){
  this.pause();
});

The way the html is set up, I needed to get the child node of each .item element.

Some information on this:
jQuery has a simple logic, wether a method is called on all or only on the first element. If a method returns something (does not return undefined) jQuery won't iterate through all elements. In this case jQuery will call the method on first element and return the return value of the method. If it returns nothing jQuery will call the method on all elements and returns the jQuery object for chaining.

In this particular case you are using the pause method, which is not a jQuery method but a normal DOM method and has to be called on each DOM element itself. The .get method of jQuery always returns of DOM element inside of the jQuery collection. $.get(0) is used here to return the first DOM element.

Jquery only affect one element in a class being hovered

If you try to hide by using clss name, then DOM will hide all the element with same name.

So you have to use this keyword for selecting current hovered element.

Try following:

$('.hideme').hover(function(){
        $(this).hide();
});

jQuery ID selector works only for the first element

I have 3 buttons with same id ...

You have invalid HTML. You can't have more than one element in a page with the same id attribute value.

Quoting the spec:

7.5.2 Element identifiers: the id and class attributes

id = name [CS]

This attribute assigns a name to an element. This name must be unique in a document.

Solution: change from id to class:

<button type="button" class="btn btn-primary xyz" value="1">XYZ1</button>
<button type="button" class="btn btn-primary xyz" value="2">XYZ2</button>
<button type="button" class="btn btn-primary xyz" value="3">XYZ3</button>

And the jQuery code:

$(".xyz").click(function(){
    alert(this.value);
    // No need for jQuery :$(this).val() to get the value of the input.
});

But it works only for the first button

jQuery #id selector docs:

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.

If you look at the jQuery source you can see when you call $ with an id selecor-($("#id")), jQuery calls the native javascript document.getElementById function:

// HANDLE: $("#id")
} else {
    elem = document.getElementById( match[2] );
}

Though, in the spec of document.getElementById they didn't mention it must return the first value, this is how most of (maybe all?) the browsers implemented it.

DEMO

Why does jQuery class selector only return one element?

You do not have jQuery, you are using the debugger's shortcut for document.querySelector(). If you would use $$('.current-pad-o'), you would get all of them.

Too verify that you are not using jQuery, type the following into the command line:

console.log($)

For querySelector, you are going to see this:

function $(selector, [startNode]) { [Command Line API] }

For jQuery, you would see this:

function (a,b){return new n.fn.init(a,b)}

Reference: console expressions

Why does my JS function only affect the first element addressed in the HTML structure? (changing display property of class)

you are missing a set of parentheses here onchange="validate_3"> , add a set of parentheses like this onchange="validate_3()">, and your first selection should work

To get what you want, make sure you've added the parentheses as shown above.

javascript,

// take this line out of your funtion and change `querySelector` to
//`querySelectorAll`
var a = document.querySelectorAll(".map-content");

function validate_3() {
    
  var x = document.getElementById("location_select");
  var y = x.options[x.selectedIndex].value;

//use The forEach() method to executes a provided function once for each
//element. 
  a.forEach((element) => {
  if (y != element.getAttribute("value")) {
  (element.classList.add("map-content"))
  } else {
  element.classList.remove("map-content")
  };
  });
};

But really, you're better off not using onclick at all and attaching the event handler to the DOM node through your Javascript code. This is known as unobtrusive javascript.

only affect one element [jquery]

HTML ID's are UNIQUE although you can write two of them in code, you're breaking standards by doing so... Switch to a class instead of an ID first of all...

Secondly, you can use the .find() method on this in your hover function assuming that the image you're looking for is a CHILD of the element you are hovering:

$('.rightMainP').hover(function() {
    $(this).find('.rightMain img:first-child')
         .attr('src', '../Images/whiteSidewaysNub.png')
}, function() {
    $(this).find('.rightMain img:first-child')
         .attr('src', '../Images/graySidewaysNub.png')
});

You can use a slightly different syntax, which is $( selector, context ) - Internally jQuery basically returns $( context ).find( selector ).

Updated: OP posted some html

Looking at your HTML I would first suggest that you bind the "hover" event on the .rightMain (after you turn it into a class):

$('.rightMain').hover(function() {
    $( this ).find('img:first-child').attr('src', '../Images/whiteSidewaysNub.png');
}, function() {
    $( this ).find('img:first-child').attr('src', '../Images/graySidewaysNub.png');
});

You could even go a step further down the "cleaner code" line and do something like this:

CSS:

.rightMain div.nub { 
   background-image:url(/Images/whiteSidewaysNub.png);
   width: 10px; /* obviously guessing at this value here.. */
   height: 10px; /* obviously guessing at this value here.. */
}

 /* works in a lot of new browsers without ANY JS - see
    http://www.quirksmode.org/css/contents.html#t16 */
.rightMain:hover div.nub,
 /* just in case you want to support IE6 / use a class! */
.rightMain.hovered div.nub {
   background-image: url(/Images/graySidewaysNub.png);
}

JavaScript (if you want to support the evil IE6 )

$(".rightMain").hover(function() { $(this).toggleClass('hovered'); });

HTML:

<div class="rightMain">
   <!-- instead of the image -->
   <div class='nub'> </div>
   <!-- the rest of your stuff -->
</div>

A demo (without IE6 support) is here: http://jsfiddle.net/gnarf/u7gVA/

I would generally ignore the IE6 support, and just move on with the code, no need for JavaScript to handle this...

---

Related Topics