I'm confused as to how I should go about doing this.
My page is using PHP to take product codes off a database and using them to generate ids for elements. For example: $("#touch-'.$productcode.'") and $("#popup-'.$productcode.'")
I need to make it so when an element is clicked on, jQuery will find an element in the document which contains the last 11 characters of the selector's id plus additional text.
e.g. the selector $(this) (which has a generated id of #touch-123-456-789) would get its own id, remove everything but the last 11 characters (the product code), append popup- to the beginning, and then find the element $("#popup-123-456-789") and perform an action.
How about some thing like this..
<div class='touch' id='touch-123-456-789'> bla bla </div>
on your jquery
$('.touch').click(function(){
var id = $(this).attr('id');
id = id.substring(5);
$('#popup' + id).doSomething();
});
This is your Html
<div class="pop-up" value= "123-456-789">one</div>
<div class="pop-up" value="123-123-123">two</div>
This is your jQuery
$(".pop-up").click(function(){
var value = $(this).attr("value");
var yourElement = "popup-"+value;
$("#"+yourElement).doSomething(function () {
});
});
Try to break your id like:
$('.touch').click(function () {
var id = $(this).attr('id');
id = id.split(/-(.+)?/)[1];
$('#popup-' + id).html("Hello changed");
});
The .split() here will split the on the first occurrence of "-". So you can do anything with this.
Lets suppose you have two elements in your html code:
<div class='touch' id='touch-123-456-789'> Touch me </div>
<div class="popup" id="popup-123-456-789"></div>
This might help. http://jsfiddle.net/79yut/
HTML:
<div class="element" id="#touch-123-456-790">Sample element1</div>
<div class="element" id="#touch-123-456-791">Sample element2</div>
<div class="element" id="#touch-123-456-792">Sample element3</div>
<div class="element" id="#touch-123-456-793">Sample element4</div>
<div class="element" id="#touch-123-456-794">Sample element5</div>
JS:
for (i = 0; i <= $(".element").length; i++) {
if (i < $(".element").length) {
var id = $(".element").eq(i).attr("id");
id = "popup-" + id.substring(7);
$(".element").eq(i).attr("id", id);
} else {
$("#popup-123-456-792").css('color','blue');
}
}
Related
I am getting id of div from external source and in that spaces also coming in id , how to get the value of id. Here is my div example:
<div id="123456ABC" class="classname" onclick="javascript:AddValue(aa.value,'33',bb.value,'1000')"></div>
<div id="78904 bbc" class="classname1" onclick="javascript:AddValue(aa.value,'55',bb.value,'2000')"></div>
I need to get the class name from the id. Here is what I am doing:
function AddValue(aa, bb) {
var classOfDiv = $('#123456ABC').attr('class');
var classOfDivs = $('#8904 bbc').attr('class');
alert(classOfDiv);
alert(classOfDivs);
}
The first alert is working fine but second is not fetching a value. How can I handle this? All the values are dynamic.
Use $("div[id='78904 bbc']") to access element which has spaces in id, Try:
var classOfDiv = $("div[id='123456ABC']").attr('class');
var classOfDivs = $("div[id='78904 bbc']").attr('class');
alert(classOfDiv);
alert(classOfDivs);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="123456ABC" class="classname" onclick="javascript:AddValue(aa.value,'33',bb.value,'1000')"></div>
<div id="78904 bbc" class="classname1" onclick="javascript:AddValue(aa.value,'55',bb.value,'2000')"></div>
document.getElementById will search th whole document and return the result but here i want the same function for a particular div as i want to search the specific div for an id and based on that i want to execute
here is my code
if(document.getElementById('myId') ) // but it return the result from whole div
{
// Do something
}
else {
// do something else
}
i want something like
if(document.getElementById('myId') in specific div) \\ how to do this
Let say, you are looking for an element(div) with id "childId" within parent div with id "parentId". The Jquery code would be:
$("#parentId").find("#childId")
As a shortform, you can even do
$("#parentId #childId")
Since the above statement will find children in any depth, if you would want a direct child search, (first level child)
$("#parentId > #childId")
Generally ids are unique within the page (or atleast are recommended to be :) ). In such a case, you can directly do
$("#childId")
and still get the child element.
Whichever applies.
You want to search for a specific id for all div
I assume that you know the id you want to search
You can itenerate the document.getElementsByTagName('div') like this
var myID = 4;
for (var i = 0; i < document.getElementsByTagName('div').length; i++){
var res = document.getElementsByTagName('div')[i+1].id;
if(res == myID){
document.body.innerHTML = res;
break;
}
}
And this would be your HTML look like:
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<div id="6"></div>
See Demo here
Or I further assume that yor HTML code is look something like this:
<div id="myId">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<div id="6"></div>
</div>
Then you can itenerate the document.getElementById('myId').getElementsByTagName('div') like this:
var myID = 3;
for (var i = 0; i < document.getElementById('myId').getElementsByTagName('div').length; i++){
var res = document.getElementsByTagName('div')[i+1].id;
if(res == myID){
document.body.innerHTML = res;
break;
}
}
And See Another Demo Here
id attributes should be unique, so searching an element with an id within another element it's the same as search for that id directly in the whole DOM.
You can return an element only if it is a child of a particular element by using a querySelector:
document.getElementById('evalBar').querySelector('#button_2');
/* returned value: (html BUTTON)
[object HTMLButtonElement]
*/
You could use the querySelector function. IMPORTANT: check browser compatibility!
https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector
Example:
<div id="foo">
<div id="bar">
this is foo-bar
</div>
</div>
<script>
var bar = document.querySelector("#foo #bar")
alert(bar.innerHTML); // result: alert message "this is foo-bar"
</script>
I have two divs like so:
First Div
<div class="carousel">
<div class="item active" id="ZS125-48A">...</div>
<div class="item" id="FFKG-34">...</div>
<div class="item" id="DSSS-56">...</div>
<div class="item" id="ZSFD-48A">...</div>
</div>
Second Div
<section class="contentBikeTabbedMenus">
<div id="ZS125-48ATab" class="active" "="">...</div>
<div id="FFKG-34Tab" class="" "="">...</div>
<div id="DSSS-56Tab" class="" "="">...</div>
<div id="ZSFD-48ATab" class="a" "="">...</div>
</section>
The first div is a simpled down version of a carousel i have on the page with items like so. I am able to get the id of the active item and store this ready for use.
For the second div i am trying to get the id of the same div with the same id appended with the word 'Tab'.
Heres my code:
// get the carousel
var $carousel = $(".carousel");
var $active = $carousel.find(".item.active").attr('id');
var $bikeId = $active;
var $bikeIdTab = $bikeId + "Tab";
//This prints out the correct id of the item with the class active.
var $tab = $(".contentBikeTabbedMenus");
var $tabId = $tab.find($bikeIdTab);
//i am trying to do the same here but i am having no success.
console.log($bikeIdTab);
console.log($tabId);
Logically i thought that i have the correct id of the div i want to find, but it is not returning this.
How can i get the id of the second div that is the same as the first div. so if the first id is ZS125-48A i can find the div with the id ZS125-48ATab.
Thanks
Simply replace
var $tabId = $tab.find($bikeIdTab);
with
var $tabId = $('#'+$bikeIdTab);
Note: I would prefer to avoid the $ as first char of variable name if these are not jQuery Object: it could confuse us.
You need to prepend the ID pre-selector (#). For example:
var $tabId = $tab.find('#'+$bikeIdTab);
Also, since IDs should be unique, there's no need to use find(). Specifying the selector on its own should be sufficient:
var $tabId = $('#'+$bikeIdTab);
You just missed the # to find the ID in line 8:
// get the carousel
var $carousel = $(".carousel");
var $active = $carousel.find(".item.active").attr('id');
var $bikeId = $active;
var $bikeIdTab = $bikeId + "Tab";
//This prints out the correct id of the item with the class active.
var $tab = $(".contentBikeTabbedMenus");
var $tabId = $tab.find('#' + $bikeIdTab);
//i am trying to do the same here but i am having no success.
console.log($bikeIdTab);
console.log($tabId);
I have this html code:
<div class="category" id="154"> Category </div>
<div class="category2" id="156"> Category2 </div>
<div class="category3" id="157"> Category3 </div>
<div class="category4" id="158"> Category4 </div>
<input type="text" />
So in example if I write a id in text box, how to select div .category with this ID and get inner HTML text. With jQuery
so you only need to use the ID as this is a unique value (or should be)
var html = $("#154").html();
NOTE: If you do have duplicate ID values in use then it is important to note that JQuery will only select the first one.
if you want to do this when a textbox value is entered you could do this on the textbox change event...
$("input").change(function(){
var id = $(this).val();
var element = $("#" + id);
if(element){
var html = element.html();
//do something with html here
}
});
NOTE: you may want to put an ID value on your textbox to ensure you get the correct control
Although I strongly suggest you find a way around using duplicate ID values, you could have a function like this to get the DIV you want...
function GetContent(className, id) {
var result = null;
var matchingDivs = $("." + className);
matchingDivs.each(function(index) {
var div = $(matchingDivs[index]);
if (div.attr("id") == id) {
result = div.html();
}
});
return result;
}
Click here for working example
I recommend you give the textbox an ID, in case you add other textboxes to the page.
But if you only have the 1 text input, the following would work:
var id = $('input:text:first').val();
var innerHtml = $('#' + id).html();
Here is a jsFiddle that will alert the html using this technique whenever the text in the textbox changes.
$("#id.class")
will select the necessary element by both class and ID (replacing id and class with their respective names, of course).
Adding .html() to the end will get you the content.
i.e:
$("#id.class").html()
Suppose I have this:
<div id="apple" class="fruit"></div>
<div id="orange" class="fruit"></div>
<div id="grape" class="fruit"></div>
<div id="pear" class="fruit"></div>
How do I write a javascript function that can loop and print out all the fruit IDs with class "fruit"? Using JQuery.
$('div.fruit').each(function(){
//will loop through all divs with the class fruit.
$(this).attr('id'); //will give you the id of the current div
});
As printed out as comma separated list (ids is an array of the ids).
var ids = $.map($('div.fruit'), function(e) {
return e.id;
});
document.write(ids.join(','));
Working Demo - click on the output tab to see the output.
Using the following would cater for there being <div class="fruit"> with no id
var ids = $.map($('div.fruit'), function(e) {
return e.id? e.id : null;
});