My form has number of input elements. When i looping through some elements i need to find the id of the next element which is in next div.
The whole code is in jsfiddle
$(":text[name^=sedan]").each(function(i){
var curTxtBox = $(this);
var curId = this.id;
alert(curId);
//var nextTextFieldId = $(this).closest('div').find('.number').attr("id"); // gives undefined
var nextTextFieldId = $('#'+curId).next('div:input[type=text]').attr("id"); // gives undefined
alert(nextTextFieldId )
});
this is not working. nextTextFieldId gives value undefined.
html
<div class="first">
<div class="second">
<input type="text" class ="myClass" name="sedan1" id = "sedan1" value="1" />
</div>
<div class="third">
<input type="text" class ="yourClass" name="suv1" id ="suv1" value="2"/>
</div>
</div>
<div class="first">
<div class="second">
<input type="text" class ="myClass" name="sedan2" id = "sedan2" value="3" />
</div>
<div class="third">
<input type="text" class ="yourClass" name="suv2" id = "suv2" value="" />
</div>
</div>
var nextTextFieldId = $(this).parent().next().find(':text').attr("id");
Expanding my comment (summary: don't do this, simply iterate over the jQuery object with for and be happy) into an answer:
$(document).ready(function(){
var $textBoxes = $(":text[name^=sedan]");
for(var i = 0; i < $textBoxes.length; ++i) {
var $curTxtBox = $textBoxes.eq(i);
alert($curTxtBox.attr("id"));
if (i < $textBoxes.length - 1) {
var nextTextBoxId = $textBoxes.eq(i + 1).attr("id");
alert(nextTextBoxId);
}
else {
// This was the last one, there is no "next" textbox
}
}
});
Note that:
Doing things this way does not require walking the DOM tree all the time like naive approaches using each (which end up searching the tree for the same element multiple times).
This approach will work correctly as long as you keep the sedanXX ids. Approaches that re-walk the DOM tree will break as soon as there is any significant change to your HTML.
If all you want is the id's, and they are incrementing integers, even this is overkill.
Try changing to this line:
var nextTextFieldId = $('#'+curId).parent().next('div:input[type=text]').attr("id"); // gives undefined
Your line expects the input tag to have a sibling div tag.
Related
I have links embedded inside .media-body .media-heading in the HTML example. I'm wanting to write JS to remove any link where the text does not start with the value attribute in the input element, in this case "A"
I've done a manual version below that checks the first A tag and manually removes the other A tag on the click of a button if the text doesn't start with "A". I need this to somehow loop through and do this automatically on page load but not sure how I do that. Any help is appreciated.
<!DOCTYPE html>
<html>
<body>
<input type="text" name="search" value="A" class="searchbox">
<div class="media-body">
<div class="media-heading">
A doc beginning with A
</div>
</div>
<div class="media-body">
<div class="media-heading">
Doc beginning with D
</div>
</div>
<button onclick="startFunction()">Remove wrong doc</button>
<script>
function startFunction() {
var az = document.getElementsByTagName("input")[0].getAttribute("value");
var getstart = document.getElementsByTagName("a")[0].innerHTML;
var searchletter = getstart.startsWith(az);
var myobj = document.getElementsByTagName("a")[1];
if(searchletter = az)
{
myobj.remove();
}
}
</script>
</body>
</html>
The second part of your question as how to do this automatically on page load is answered rather quickly. Conveniently you already wrapped the functionality inside it's own function - startFunction(). So all you have to do is execute that function after the <body> definition of your html code.
The first part isn't much more difficult as you also almost have anything you need set up yet. The only thing that's missing is looping over the HTMLCollection - more or less an array - retrieved by executing document.getElementsByTagName("a") using a simple for-loop.
There's a catch though: as you loop over the HTMLCollection and eventually remove an object from the DOM using .remove() you're ultimately changing the collection too. In other words, if you remove an object, the list shrinks by one element. To compensate your loop needs to start with the initial number of elements and decrement by one.
Here's an example:
function startFunction() {
let az = document.getElementsByTagName("input")[0].getAttribute("value");
let elements = document.getElementsByTagName("a");
let element;
for (let a = elements.length - 1; a >= 0; a--) {
element = elements[a];
if (!element.innerHTML.startsWith(az)) {
element.remove();
}
}
}
startFunction();
<input type="text" name="search" value="A" class="searchbox">
<div class="media-body">
<div class="media-heading">
A doc beginning with A
</div>
</div>
<div class="media-body">
<div class="media-heading">
Doc beginning with D
</div>
<div class="media-body">
<div class="media-heading">
Something completely different
</div>
</div>
I have three 3 divs
<div id= "product_1"></div>
<div id= "product_2"></div>
<div id= "product_3"></div>
<div id= "product_4"></div>
<div id= "product_5"></div>
I am changing the ids dynamically
var hotelCode = "CUNMXHIDD,CUNMXMAYA,CUNMXDSAN"
var splittedHotelCode = hotelCode.toString().split(',');
jQuery.each(splittedHotelCode, function(i, hotelCode) {
$("#product_"+ i).attr("id","product_"+ hotelCode);
});
After this I want to hide divs which are not been indexed product_4 and product_5
Now DOM is
<div id= "product_CUNMXHIDD"></div>
<div id= "product_CUNMXMAYA"></div>
<div id= "product_CUNMXDSAN"></div>
<div id= "product_4"></div>
<div id= "product_5"></div>
I dont want to hard code. Is it possible I can hide them by Jquery ?
You could use the length of the array and the slice method.
$('div[id^=product]').slice(splittedHotelCode.length).hide();
Keep track of index to preserve the last index
Use :gt() to select and then hide all elements that have id that start with product_
var hotelCode = CUNMXHIDD,CUNMXMAYA,CUNMXDSAN
var splittedHotelCode = hotelCode.toString().split(',');
var lastIndex = 0;
jQuery.each(splittedHotelCode, function(i, hotelCode) {
$("#product_"+ i).attr("id","product_"+ hotelCode);
lastIndex = i;
});
$('[id^="product_"]:gt('+lastIndex+')').hide();
I'm looking for a way to show my input content in multiple places, but nothing happens when I put getelementsbyclassname('output') instead of getElementById('output')
I actually have this but because of the getElementById, only the first element is changing
<script>
function functionname() {
document.getElementById('output').innerHTML=document.getElementById('input').value;
}
</script>
<input type="text" id="input" onkeyup="functionname();return false;" />
<span id="output"></span>
Thanks by advance, and sorry for the bad english
var spans = [].slice.call(document.querySelectAll('.output'));
var val = document.getElementById('input').value;
for (var i = 0; i < spans.length; i++) {
spans[i].innerHTML = val;
}
This will work on spans with a class of output:
<span class="output"></span>
<span class="output"></span>
<span class="output"></span>
Two problems:
You have no element with a class of "output".
JavaScript is case-sensitive. getelementsbyclassname should be getElementsByClassName.
<span class="output"></span>
var input = document.getElementById('input'),
outputs = document.getElementsByClassName('output')
for (i=0; i<outputs.length; i++)
outputs[i].innerHTML = input.value;
However as you have jquery tagged, you can instead use the following:
$('.output').html($('#input').val());
Seems like you want to update the html of multiple divs based on the value of an input
HTML
<input type="text" id="input" />
<div class="output"></div>
<div class="output"></div>
JS
$('.output').html($('#input').val());
JSFiddle: http://jsfiddle.net/DDnXs/
I have some Divs:
<div id="content">
<div class="c" id="1">
<div id="xyz">dont care</div>
<div id="texts1">
<div name="check"> ContentText </div>
</div>
</div>
<div class="c" id="2">
<div id="xuyz">dont care</div>
<div id="texts2">
<div name="check"> ContentText </div>
</div>
</div>
</div>
I want to iterate through all elements of the "c" class.
Then I want to check, if the Div elements named "check" of each "c" element contains special text.
If true, then manipulate the "c" element (which contains the special text)
I tried something like this:
var ele = document.getElementsByClassName("c");
for(var i=0;i<ele.length;i++)
{
var check = ele[i].getElementsByName("check");
if(check.innerHTML ....)
}
But thats not working :/
Log from Firefox:
TypeError: ele[i].getElementsByName is not a function
Where is my mistake?
A simple querySelectorAll() should do the trick:
var check = document.querySelectorAll('.c [name="check"]');
And as stated in a comment already, only document has getElementsByName method.
With jQuery this is very simple -
$('[name="check"]:contains("your special text")')
With jQuery (you have tagged it with it as well)
$(document).ready(function () {
$('div.c').find('div[name="check"]').each(function(){
// here check HTML and do needed manipulations
if($(this).html() == 'ContentText'){
$(this).closest('div.c').children().first().html('I CARE');
}
});
});
see jSFiddle -> http://jsfiddle.net/ApfJz/32/
Here is a modification of your code to make it work as intended
var ele = document.getElementsByClassName("c");
for (var i = 0; i < ele.length; i++)
{
if (ele[i].getAttribute('name') === "check") {
// do something with matching elements here
}
}
The code
<div class="something>
<input type="text onchange="some_function(this)">
<span>Blqh blqh</span>
<span>Blq blq</span>
</div>
Once there is a change in the input I want some_function(this) to delete all <span> tags. So far in the function I have:
function some_function(x_this) {
var parent=x_this.parentNode;
}
How do i get all the <span> elements and delete them?
Thanks a lot
With the following HTML, for example
<div id="foo">
<input />
<span>Blqh blqh</span>
<span>Blq blq</span>
<br />
</div>
you could run this JavaScript
var parent = document.getElementById('foo'), i = parent.childNodes.length;
while (i--)
if (parent.childNodes[i].tagName === 'SPAN')
parent.removeChild(parent.childNodes[i]);
function some_function(x_this) {
var parent=x_this.parentNode,
spans = parent.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++){
parent.removeChild(spans[i]);
}
}
$('#parent').find('span').remove();
or use pure js
var childrenspan = document.getElementById('id').getElementsByTagName('span');
for(var i=0;i<childrenspan.length;i++)
{
childrenspan[i].parentNode.removeChild(childrenspan[i]);
}
If you are using jquery then add id to your Div tag and then
<div id="mydiv">
<input />
<span>Blqh blqh</span>
<span>Blq blq</span>
<br />
</div>
Use this jquery code:
$('#mydiv').find('span').remove()