I am trying to link to divs together by linking the data-attribute name with the id but seem to receive an error
<div class="pod-container grid_3" data-name="#george">
<div class="pod">
<img src="img/example1.png" alt="">
</div>
</div>
<div id="george">Hello World</div>
I'm referencing jQuery 1.8.3 and using the following code to identify the data attribute on the div i click
<script>
$('.pod-container').click(function(){
var identifyId = $(this).data('name');
console.log(identifyId);
//$(identifyId).show();
});
</script>
but when it is logged in the console I get.
#george testdoc.html:123
undefined testdoc.html:123
You've got two elements with class "pod". One of them has a data-name attribute, and one doesn't. Each click will trigger the event handler on both elements.
Just grab the elements that have the data-name. What you're currently doing is targeting just .pods which may or may not have data-name. With the below code, you're just being specific.
$('.pod[data-name]').click(function(){
var identifyId = $(this).data('name');
console.log(identifyId);
//$(identifyId).show();
});
You have 2 elements with the pod class and are getting 2 events fire. The inner div does not have a data-name attribute.
Related
I have an HTML like this
<div class="this">
EXP
</div>
I want to add id to <a>. But do not know what to do.
First select your element using something like .getElementsByClassName(). Keep in mind that .getElementsByClassName() returns a NodeList collection of elements, so you'll want to access the first index (or loop over them). You can then simply set the ID with .id, as the ID is merely a property of an element.
This can be seen in the following:
const element = document.getElementsByClassName('this')[0];
element.id = 'element';
console.log(element);
<div class="this">
EXP
</div>
If you want to add this with Javascript, you'll need to use a selector to target your <a> tag and then set the id attribute on it. You can do this by using the querySelector() function or as seen below:
// Find an <a> tag that occurs below a class called "this" and set its id attribute
document.querySelector('.this > a').id = "some-id";
There are many other available functions to handle this through native Javascript and other frameworks, so your milage may vary depending on what you are using.
Example
In this example, we have provided some CSS that should only apply to an element with an id of "test" and we'll run the necessary code to show that the id is being added to the element (as it will be red):
document.querySelector('.this > a').id = 'test';
#test { color: red; }
<div class="this">
EXP
</div>
Add the id attribute to the <a> tag. See the differences of the middle line:
<div class="this">
<a id="expid" href="exp.com">EXP</a>
</div>
Hi there I am encountering the following problem I have 3 div's dynamically loaded by ajax like so:
<div class="item" id="item1"> // Dynamically loaded
<input>
<input>
</div>
<div class="item" id="item2"> // Dynamically loaded
<input>
<input>
</div>
<div class="item" id="item3"> // Dynamically loaded
<input>
<input>
</div>
$(document).on('change', '.item', function() {
});
What I want to achieve is when I make a change on the input of one of the three div's, I wanna know where the input was provided. Because the elements are dynamically loaded I can't use a direct selector but I have to use $(document).on and because I dont make use of the direct selector I can't make use of (this). How do I find out in what item changes have been made?
Thanks in advance!
The first argument of the handler - for instance e - would receive the event if it is declared. Then the e argument is having target property which gives you the HTML element on which the event originated. So this would give you a reference to the changed input:
$(document).on('change', '.item', function(e) {
var targetInput = e.target;
var parent = $(targetInput).closest("div.item");
// Do something ...
});
According to your HTML, each div is having different id, Hence you can get the div Id on change of the input. Please test this piece of code and test.
$("input").on('keyup', function(){
//Get the parent div id,
var changeDivID = $(this).parents('div').attr("id");
alert(changeDivID);
});
I have the following markup
<div class = "general">
<div id ="custom"></div>
</div>
How to change id = "custom" in all <div> with class="general" from href on page using jQuery?
You can try this:
$("div.general").each(function() {
$(this).children("div#custom").text($(this).children("a").attr("href"));
});
If I understand you correctly, you want to iterate through all div.generals, and change the text of each child div#custom to the href of the child a.
See a working example on JSfiddle.
Also, another tip is to avoid using multiple elements with the same id. In your code you have a <div> with id="custom". You also say that the div.general appears multiple times — therefore, the id "custom" will appear multiple times. This is bad practice. I suggest that you change id to class.
You need to loop through all div.general and replace the id attribute of div#custom to whatever is there as the anchors href property. The following code will work:
$(".general").each(function(){
$(this).find("#custom").attr("id", $(this).find("a").attr("href").replace("#", ""));
})
Here the .find() will dig out elements from any depth inside the parent. If you are sure about the DOM position of the elements, you can change the .find() to .children()
I'm using jQuery .attr() method to get the value of an element's attribute, in this case an id, and storing it into a string. Then I replace "info" to "article" in the string to hide and show elements in my page.
My HTML code looks like this:
<div id="navigator">
<div id="info_01">Lorem Ipsum
<div id="info_02">Lorem Ipsum</div>
</div>
<div id="info_03">Lorem Ipsum</div>
</div>
jQuery code:
$('#navigator>div, #navigator>div>div').click(function(){
var variable=$(this).attr('id');
var variable2=(variable.replace("info", "article"));
console.log(variable2);
$("#another_div").hide();
$("#"+variable2).show();
});
I'm outputting log to console, and when I click on parent divs inside #navigator such as #info_01 and #info_03 it prints only the id of the div I clicked, but when I click on child elements in #navigator such as #info_02, it prints two lines:
article_02
article_01
As you can see, the first one is from the first div I click on, but since I'm also clicking on its parent, it outputs the parent's id.
I only need to output one id, the one from the element I click on, and not its parent's id.
How can I do that?
Use .stopPropagation(). This prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. Read more on https://api.jquery.com/event.stoppropagation
$('#navigator>div, #navigator>div>div').click(function(e){
var variable=$(this).attr('id');
var variable2=(variable.replace("info", "article"));
console.log(variable2);
$("#another_div").hide();
$("#"+variable2).show();
// propagate
e.stopPropagation();
});
I have a bunch of DIVs identified by class screen-cat-comment and I want for each div to execute a plugin that receives as a parameter an attribute value from each DIV.
<div class="screen-cat-comment" catId="1"></div>
<div class="screen-cat-comment" catId="2"></div>
<div class="screen-cat-comment" catId="3"></div>
then, the selector
$('.screen-cat-comment').fragment({ code: $(this).attr('catId') });
Passing catId to myPlugin doesn't work -- from the current code, $(this).attr('catId') returns undefined. Is there any way to re-write this selector to pass attr('catId') to the plugin?
this in that context is probably the window...
$('.screen-cat-comment').each(function(){
$(this).fragment({ code: $(this).attr('catId') });
});