Change innerhtml of each first column in each row - javascript

I want to change the innerHTML of each column in each row, but I cant get it to work properly.
var numOfRows = $('.wrap').children('.row').length;
for (var i = 0; i < numOfRows; i++) {
var $firstDiv = $(".input_fields_wrap .row:eq(0)");
$firstDiv.text("Works");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
</div>
How could I properly go about this and change the innerHTML of each column in each row?

You can use something like this, too:
$('.row').each(function(i) {
$(this).children().first().text('changed '+i);
});
Demo: https://jsfiddle.net/c1hcL26m/

Please do like bellow.
$( ".row div:first-child").text("Some text")

You can use :first-child selector
Selects all elements that are the first child of their parent.
To use index, You can use .text(function)/.html(function)
$('.wrap .row .col-md-4:first-child').text(function(i) {
return 'Changed Text: ' + (i+1);
});
$('.wrap .row .col-md-4:first-child').text(function(i) {
return 'Changed Text: ' + (i+1);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
</div>

javascript approach
document.querySelectorAll('.row div:first-child').forEach(function(r){r.innerHTML = "MYchangedtext"})

Try this out
$(".wrap .row .col-md-4:first-child").text("Hello world!");

UPDATE
I now understand OP's request is to change the content of the first column only. Using this selector pattern we are able to accurately target desired elements. The use of .each() allows us to iterate through each target and modify the content and give each one a unique number as well.
var firstCols = $('div > div > div:first-of-type')
This selector is saying:
Find the divs that are the first child div...
...of a div (mom) and that div must...
...have a div parent as well (grandma).
OLD
Each column of each row equates to all cells or with this Bootstrap layout it would mean all div.col-md-4. I noticed the "CHANGE" and "DONT CHANGE" pattern, is that what you really want instead?
$('.col-md-4').html('NEW CONTENT');
SNIPPET
var firstCols = $('div > div > div:first-of-type');
firstCols.each(function(idx, obj) {
$(this).html('ROW' + (idx + 1)).css('background', 'cyan');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
</div>
</body>
</html>

Do a loop on your .row and find the first div and change the text. use the below logic
$(".wrap .row").each(function(i){
$(this).find('div:eq(0)').text("Changed "+ i );
});
Here is a working snippet
$(".wrap .row").each(function(i){
$(this).find('div:eq(0)').text("Changed "+ i );
$(this).find('div:eq(0)').css('background-color','yellow'); //demo purpose
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
<div class="row">
<div class="col-md-4">
CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
<div class="col-md-4">
DONT CHANGE
</div>
</div>
</div>

Related

How to display only the highest "score" according to the text content inside each div?

I would like to archive the below by using JavaScript (or with jQuery). Here is the HTML structure:
<div class="score-set">
<div class="score-item">A<div id="score">96+</div></div>
<div class="score-item">B<div id="score">99</div></div>
<div class="score-item">C<div id="score">99</div></div>
<div class="score-item">D<div id="score">96-</div></div>
</div>
<div class="score-set">
<div class="score-item">A<div id="score">86</div></div>
<div class="score-item">B<div id="score">88</div></div>
<div class="score-item">C<div id="score">90</div></div>
<div class="score-item">D<div id="score">90+</div></div>
</div>
<div class="score-set">
<div class="score-item">A<div id="score">83-</div></div>
<div class="score-item">B<div id="score">83+</div></div>
<div class="score-item">C<div id="score">76</div></div>
<div class="score-item">D<div id="score">78</div></div>
</div>
The JavaScript will do the modification, and the desired results will be B 99 C90 A 83- , which looks like:
<div class="score-set">
<div class="score-item">B<div id="score">99</div></div>
</div>
<div class="score-set">
<div class="score-item">C<div id="score">90</div></div>
</div>
<div class="score-set">
<div class="score-item">A<div id="score">83-</div></div>
</div>
The rules are:
Ignore all non-number in id="score", eg. + and -, and do the ranking.
Show one highest score item.
If two score items are the same in a set, show just one according to the div item sequence inside <div class="score-set">, ie. in the above example A > B > C > D.
When writing the result, write the original div item, including + or -.
To be able to do this, it would be best to get each individual score-set and treat one after another.
For each score item, we need to first get the score and transform it (Array#map) into a number with no digits (.replace(\/D+/g, ''))and memorize the score item html object.
Number(scoreItem.querySelector('div').innerText.replace(/\D+/g, ''))
We can then sort the remaining ones in descending order and simply take the first one of the list. Can be done with Array#sort and destructuring assignment.
.sort(({ score: scoreA }, { score: scoreB }) => scoreB - scoreA)
Then finally we update the score set html.
scoreSet.innerHTML = '';
scoreSet.appendChild(scoreItem);
const scoreSets = document.getElementsByClassName('score-set');
for(const scoreSet of scoreSets){
const [{ scoreItem }] = Array
.from(scoreSet.getElementsByClassName('score-item'), scoreItem => ({
scoreItem,
// it would be better here to access the score using the id
// but `score` is used multiple times which makes getting
// the score element unreliable
score: Number(scoreItem.querySelector('div').innerText.replace(/\D+/g, ''))
}))
.sort(({ score: scoreA }, { score: scoreB }) => scoreB - scoreA)
scoreSet.innerHTML = '';
scoreSet.appendChild(scoreItem);
}
<div class="score-set">
<div class="score-item">A
<div id="score">96+</div>
</div>
<div class="score-item">B
<div id="score">99</div>
</div>
<div class="score-item">C
<div id="score">99</div>
</div>
<div class="score-item">D
<div id="score">96-</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div id="score">86</div>
</div>
<div class="score-item">B
<div id="score">88</div>
</div>
<div class="score-item">C
<div id="score">90</div>
</div>
<div class="score-item">D
<div id="score">90+</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div id="score">83-</div>
</div>
<div class="score-item">B
<div id="score">83+</div>
</div>
<div class="score-item">C
<div id="score">76</div>
</div>
<div class="score-item">D
<div id="score">78</div>
</div>
</div>
This can be MUCH simplified
Note I changed the invalid ID to class="score"
If you cannot do that, then change .querySelector(".score") to .querySelector("div")
document.querySelectorAll('.score-set').forEach(scoreSet => {
const scores = [...scoreSet.querySelectorAll(".score-item")];
scores.sort((a,b) => parseInt(b.querySelector(".score").textContent) - parseInt(a.querySelector(".score").textContent))
scoreSet.innerHTML ="";
scoreSet.append(scores[0])
})
<div class="score-set">
<div class="score-item">A
<div class="score">96+</div>
</div>
<div class="score-item">B
<div class="score">99</div>
</div>
<div class="score-item">C
<div class="score">99</div>
</div>
<div class="score-item">D
<div class="score">96-</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div class="score">86</div>
</div>
<div class="score-item">B
<div class="score">88</div>
</div>
<div class="score-item">C
<div class="score">90</div>
</div>
<div class="score-item">D
<div class="score">90+</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div class="score">83-</div>
</div>
<div class="score-item">B
<div class="score">83+</div>
</div>
<div class="score-item">C
<div class="score">76</div>
</div>
<div class="score-item">D
<div class="score">78</div>
</div>
</div>

Jquery appendto div class selector

I have the following html
<div class="options">
<div class="container">
<div class="swatch-option selected"></div>
<div class="info">Text</div>
</div>
<div class="container">
<div class="swatch-option"></div>
<div class="info">Text2</div>
</div>
</div>
I try jquery to move "info" class, which has the previous class "swatch-option selected", at the end of the closing div class "options"
So my final html should be like
<div class="options">
<div class="container">
<div class="swatch-option selected"></div>
</div>
<div class="container">
<div class="swatch-option"></div>
<div class="info">Text2</div>
</div>
<div class="info">Text</div>
</div>
The jquery I tried is the following but it does not move the info class, which has the previous class swatch-option selected
<script>
require([
'jquery'
], function ($) {
$(document).ready(function(){
$('.selected.info').appendTo('.options');
})
})
</script>
$('.selected.info') means to search for an element that has both selected and info classes but they are siblings in your example.
You can use the adjacent sibling selector (+)
$(document).ready(function() {
$('.selected + .info').appendTo('.options');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="options">
<div class="container">
<div class="swatch-option selected"></div>
<div class="info">Text</div>
</div>
<div class="container">
<div class="swatch-option"></div>
<div class="info">Text2</div>
</div>
</div>

How do I use JavaScript to select content and move to other elements?

I need to move some text from demoBoxA to demoBoxB.
The demoBoxA parent element has an id selector, but the child element below it has no identifiable selector.
Is it possible to select the text content directly? Then move it into the demoBoxB sub-element (the demoBoxB sub-element has an id selector)
There are 2 difficulties with this issue.
The content of demoBoxA is dynamically generated by the program and the sort is not fixed. There are no identifiable selectors for the subelements.
only need to select part of the content. For example, in the example below, just move the phone model text of "Google", "Huawei", "BlackBerry".
Any help, thanks in advance!
<div class="container" id="demoBoxA">
<div class="row">
<div class="col-md-6">Samsung</div>
<div class="col-md-6">Galaxy S10</div>
</div>
<div class="row">
<div class="col-md-6">Google</div>
<div class="col-md-6">Pixel 4</div>
</div>
<div class="row">
<div class="col-md-6">Sony</div>
<div class="col-md-6">Xperia 5</div>
</div>
<div class="row">
<div class="col-md-6">Huawei</div>
<div class="col-md-6">Mate 30 5G</div>
</div>
<div class="row">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6">KEY2</div>
</div>
<div class="row">
<div class="col-md-6">Apple</div>
<div class="col-md-6">iPhone 8</div>
</div>
</div>
<div class="container" id="demoBoxB">
<div class="row">
<div class="col-md-6">Google</div>
<div class="col-md-6" id="pixel"></div>
</div>
<div class="row">
<div class="col-md-6">Huawei</div>
<div class="col-md-6" id="mate"></div>
</div>
<div class="row">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6" id="key2"></div>
</div>
</div>
You can chain selectors like this:
var rows = document.querySelectorAll("#demoBoxA > .row");
That will return a list of all rows inside of demoBoxA. If you need more info about chaining selectors, you can read about it here.
Then, to move the rows you can do this:
var demoBoxB = document.getElementById('demoBoxB');
rows.forEach((row) => {
demoBoxB.appendChild(row);
});
If you just want the text inside each of the columns, you can do this:
var columns = document.querySelectorAll("#demoBoxA > .col-md-6");
var texts = [];
columns.forEach((column) => {
texts.push(column.innerText);
});
Now, texts is an array of the text contents of each column.
If you want to select the cellphone models for each brand, you can do this:
var cols = Array.from(document.querySelectorAll("#demoBoxA > .col-md-6"));
var samsungCol = cols.find((col) => {
return col.textContent == "Samsung";
});
var samsungPhones = [];
samsungCol.parentNode.childNodes.forEach((col) => {
if (col != samsungCol) {
samsungPhones.push(col);
}
});
Now, samsungPhones is a list of columns, one for each Samsung phone (for example).
You can use html drag api .
Just add draggable=true for elements you want to drag and add event listeners for dragstart and dragend
html
<div class="container" id="demoBoxA">
<div class="row " draggable="true">
<div class="col-md-6">Samsung</div>
<div class="col-md-6">Galaxy S10</div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">Google</div>
<div class="col-md-6">Pixel 4</div>
</div>
<div class="row" draggabble="true">
<div class="col-md-6">Sony</div>
<div class="col-md-6">Xperia 5</div>
</div>
</div>
<div class="container " id="demoBoxB">
<div class="row " draggable="true">
<div class="col-md-6">Google</div>
<div class="col-md-6" id="pixel"></div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">Huawei</div>
<div class="col-md-6" id="mate"></div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6" id="key2"></div>
</div>
</div>
js
document.addEventListener('dragstart', function(e)
{
item = e.target;
}, false);
document.addEventListener('dragend', function(e)
{
document.getElementById("demoBoxB").appendChild(item)
}, false);
Note : you might have to add conditions to check whether the drop is actually happening in demoboxB

Applying behavior to specific div within elements with same class

I am trying to hide div with class="input" only when hidden-span is equal to i-am-secret.
I've tried different approaches using .each(function) or .next() but could not get my head around it. In order to illustrate the example I've added the code bellow.
Please note that I can not add any id's or classes and the order of the rows may vary.
(function($) {
$('.basket__item-row').each(function() {
if ($('.hidden-span').is(":contains('i-am-secret')")) {
$(this).next().hide();
}
});
})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="basket__item-row">
<div class="image">
<div>
I am normal div
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
<div class="basket__item-row">
<div class="image">
<div>
I am extra div
<span class="hidden-span">i-am-secret</span>
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
<div class="basket__item-row">
<div class="image">
<div>
I am normal div
<span class="hidden-span">another class</span>
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
I would do a traversal this way...
$('.hidden-span') // Target all the hidden spans.
.filter(function () { // Filter all the span that contains the text.
return $(this).text().indexOf("i-am-secret") !== false;
})
.closest(".image") // Get the parent `.image`.
.next(".input") // Get the `.input` which is its sibling.
.hide(); // Hide it.
(function($) {
$('.hidden-span').filter(function () {
return $(this).text().indexOf("i-am-secret") !== false;
}).closest(".image").next(".input").hide();
})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="basket__item-row">
<div class="image">
<div>
I am normal div
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
<div class="basket__item-row">
<div class="image">
<div>
I am extra div
<span class="hidden-span">i-am-secret</span>
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
<div class="basket__item-row">
<div class="image">
<div>
I am normal div
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
Please correct the syntax errors. It should be class="basket__item-row".

Elegant way to select html elements 1,2,5,6 ...with unknown number of elements/

Im looking for elegant way to select only divs on left hand side (marked green).
Number of elements is unknown, so i cannot rely on .eq() or any other function used for filtering elements.
Thank you for any advice.
Html:
<div class="row">
<div class="col-sm-6">
<div>
</div>
</div>
<div class="col-sm-6">
<div>
</div>
</div>
<div class="col-sm-6">
<div>
</div>
</div>
<div class="col-sm-6">
<div>
</div>
</div>
<div class="col-sm-6">
<div>
</div>
</div>
<div class="col-sm-6">
<div>
</div>
</div>
For each div... If its left offset is less than the 3rd one...
It has to be selected.
//Find the offset position of the 3rd div
offset3 = $(".col-sm-6").eq(2).offset().left;
$(".col-sm-6").each(function(){
if($(this).offset().left < offset3){
SelectIt = $(this).children("div"); // Select the "green" inner div
// Do something with SelectIt...
}
});
Try this :
//Select the first 2 elements of each row
var rowSize = 4;
$("div.col-sm-6").filter(function() {
return $(this).index() % rowSize < 2;
});
Demo:
$("div.col-sm-6").filter(function() {
return $(this).index() % 4 < 2
}).addClass('selected');
.selected {
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-6">
<div>1
</div>
</div>
<div class="col-sm-6">
<div>2
</div>
</div>
<div class="col-sm-6">
<div>3
</div>
</div>
<div class="col-sm-6">
<div>4
</div>
</div>
<div class="col-sm-6">
<div>5
</div>
</div>
<div class="col-sm-6">
<div>6
</div>
</div>
<div class="col-sm-6">
<div>7
</div>
</div>
<div class="col-sm-6">
<div>8
</div>
</div>
You may use first-child & nth-child.
Hope this snippet will be useful
$("#demoTable tr td:first-child").addClass("myClass");
$("#demoTable tr td:nth-child(2)").addClass("myClass");
JSFIDDLE
Note: I tried with table you can check with div.row

Categories