I have jsp element id that is dynamically setup.
It looks like
id=<%= config.getName()%>
How can I get the id of those when I click them?
How to pass the element id to the function like:
$('****').click(function(){
}
Add c class name on your button.
<input type='button' class='myButtonClass' id=<%= config.getName()%> />
You can now use the class as selector.. You have, i guess 3 ways to get the id attribute.
$('.myButtonClass').click(function(){
// first option
console.log(this.id); // use this only, not $(this), .id will not work on jquery object
// second option
console.log($(this).prop('id'));
// third option
console.log($(this).attr('id'));
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$(".common").click(function()
{
alert(this.className);
alert(this.id);
// here u can get class name id value and pass to any function u want
// functinname(this.className);
});
});
</script>
<div id="vik" class="common">vik div</div>
<div id="cha" class="common">cha div</div>
you can use class to get dynamic id as:
$(".any").click(function(){
alert($(this).attr("id"));
});
Isn't there another unique attribute? for example, class name, tag name,...
if nothing, there is another way that create unique attribute value in the tag.
<div id=<%=config.getName()%> dynamicId="true"></div>
Related
I have a category with "woocommerce columns-3" class and I want to change it to "woocommerce columns-4". How can I do it using javascript?
I've tried this code without sucess:
<script type="text/javascript">
document.getElementById("main").classList.add('woocommerce columns-4');
document.getElementById("main").classList.remove('woocommerce columns-3');
</script>
HTML
You must target the correct element to make it work. In your code you are trying to target an element with the id main.
I would recommend using document.querySelector()
So your code would be:
<script type="text/javascript">
// select element
var ourElement=document.querySelector(".elementor-widget-container .woocommerce.columns-3");
ourElement.classList.remove('columns-3');
ourElement.classList.add('columns-4');
</script>
I have created a button element structure like below
<input
type="button"
class="btn btn-primary"
name="redirect"
value="<mycustomtag data-id=15>"
title="<mycustomtag data-id=14>"
>
Now, whenever the DOM gets ready I'm trying to find out the custom element and trying to replace with string. But I'm not able to replace the custom element.
The snippets I have used to find is as below
jQuery("mycustomtag").each(function(){
//process here
});
PS this works fine in the following case:
<div><mycustomtag data-id=20></div>
<h4><mycustomtag data-id=18></h4>
your code
jQuery("mycustomtag")
will try to find tag named mycustomtag, and what i understand is you are trying to replace the input attributes right ?
try following
//if you want to get values
var value = $("#btnCustom").attr("value");
var title = $("#btnCustom").attr("title");
alert(value);
alert(title);
//if you want to set values
$("#btnCustom").attr("value","replacevalue");
$("#btnCustom").attr("title","replace value 2");
value = $("#btnCustom").attr("value");
title = $("#btnCustom").attr("title");
alert(value);
alert(title);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input
type="button"
class="btn btn-primary"
name="redirect"
value="<mycustomtag data-id=15>"
title="<mycustomtag data-id=14>"
id="btnCustom"
>
You couldn't find them since the value of an attribute is considered just like a string.
To find those elements you need to select them based on the main tag by selecting the specific attribute using .prop(), like :
$('input').each(function() {
$(this).val();
$(this).prop('title');
});
PS this works fine in the following case
That because in this case it's considered as a tag element in your DOM that why jQuery can find it by a simple selector.
$('input').each(function() {
console.log($(this).val());
console.log($(this).prop('title'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn btn-primary" name="redirect" value="<mycustomtag data-id=15>" title="<mycustomtag data-id=14>">
In your first HTML code what you're looking for is in the value or title attribute. In your second it's the element name.
To select an element based on its value, use the following syntax:
$("input[value='<mycustomtag data-id=15>'")
To select an element based on its title works similarly.
If you put your custom tag in an attribute of another tag it won't be rendered in the page, in other words it won't be part of the document DOM tree, it will be just a string in an attribute, that's why when you use jQuery("mycustomtag") you don't get anything, but it will work if you put it as a child of a div or a span.
So in your specific case you will need to use .attr() method to get it from this specific attribute or .val() method if it's in the value.
jQuery("input").attr("title");
jQuery("input").val();
Demo:
console.log(jQuery("input").attr("title"));
console.log(jQuery("input").val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input
type="button"
class="btn btn-primary"
name="redirect"
value="<mycustomtag data-id=15>"
title="<mycustomtag data-id=14>"
>
I have this code that gives me all the LABEL inside the HTML element with id "nuovaImmagine":
$.labelImmagine = $("#nuovaImmagine1").find("label");
I know that inside $.labelImmagine there are 3 labels. If I do alert($.labelImmagine.size()); the alert shows "3";
Now I have to get the first element of the array and edit the text of the label.
I tried both $.labelImmagine.get(0).text("Hello") and $.labelImmagine[0].text("Hello") but none works.
Any idea?
Thank you
You don't want the HTML element, you want the jQuery object of that HTML element. I can tell because you're trying to use jQuery methods on it.
Both $().get(0) and $()[0] give you DOM nodes. You need $().eq(0) or $().first(), which return a jQuery object.
It's a bad idea to pollute the $ namespace. I'd rather use
var $labelImmagine = $("#nuovaImmagine1").find("label");
// ^--- no dot.
But yea.... otherwise, simply do like
$.labelImmagine = $("#nuovaImmagine1").find("label");
$.labelImmagine.eq(0).text("WOOOOO");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nuovaImmagine1"><label>TEST</label></div>
and all wrapped inside an IIFE or document ready scope:
jQuery(function($) { // DOM ready and $ alias secured
/**/
});
You can use .eq() and change its text with .text()
$.labelImmagine = $("#nuovaImmagine1").find("label");
$.labelImmagine.eq(0).text('some text');
Check the below snippet
$.labelImmagine = $("#nuovaImmagine1").find("label");
$.labelImmagine.eq(0).text('some text')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nuovaImmagine1">
<label>label 1</label>
<br>
<label>label 2</label>
<br>
<label>label 3</label>
<br>
</div>
If you want to continue using Jquery you would need to re-'jqueryify' the element.
For example
$($.labelImmagine[0]).text("Hello")
This is because by selecting the element by index it is no longer a jquery object, and thus .text() doesn't exist.
Otherwise you could use
$.labelImmagine[0].innerHTML = "Hello"
I found many example finding elements by attribute value BUT not with name. I want to find all elements (can be link, button, anything) with the attribute containing deleteuserid. I tried this:
console.log($('[deleteuserid!=""]'));
but this find "everything" which not even containing the deleteuserid attribute...
something like this: jQuery how to find an element based on a data-attribute value? expect that I dont have a concrete value (in other words, I want to find $("ul").find("[data-slide=*]");
Simply use deleteuserid instead of deleteuserid!="" like following.
console.log($('[deleteuserid]'));
you can use the jquery attribute selector to search by name.
console.log($('[name="deleteuserid"]'));
You can search by simple $('[name="deleteuserid"]')
console.log($('[name="deleteuserid"]'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p name="deleteuserid">
</p>
<div name="deleteuserid">
</div>
<i name="deleteuserid"></i>
<b></b>
$( "*[name*='deleteuserid']" ).addClass('iFoundyou');
JSFiddle
Reference: https://www.w3schools.com/cssref/sel_attr_begin.asp
My demo:
All my selects have id="<f_field_name>"
<select id="f_type" />
<select id="f_employee" />
$('[name="form_monitoria_ligacoes"]').find('[id^="f_"]')
I have one problem in display the block using div name .Here My code
<button onClick="reply_click()">⨯</button>
<div id='id' name='name' style="display: none;" >I am comming..</div>
<script>
function reply_click() {
//document.getElementById('id').style.display='block';
document.getElementsByName('name').style.display='block';
}
</script>
Using div id it will display the block ,but using div name it's not working
Any body give the sugesstion ?
Thanks in advance
Because getElementsByName returns an nodelist not a single element, so There should be
document.getElementsByName('name')[0].style.display='block';
DEMO
I think name is not an legal name to use it as value for name attribute. If this is the case, then use a proper legal name to use it as value of name attribute.
And, anyways try with different name as:
document.getElementsByName('divName')[0].style.display='block';