I get the elements well by javascript but not by jQuery and I need them by jQuery .
By javascript I get them this way:
let all = document.querySelectorAll('.botonEstado');
console.log(all);
And it actually gives me the result.
For jQuery try this way:
var all = $(".mbox").map(function() {
return this.innerHTML;
}).get();
console.log(all.join());But I do not get anything.
I have made the attempt based on this question in Stack Overflow.
You can use each which:
It serves to iterate over a jQuery object, executing a function for each matching element.
The
.each()method is designed so that the constructions of DOM loops are concise and less prone to errors. When it is called, iterates over the DOM elements that are part of the jQuery object. Every Once the callback is executed, the iteration of the current loop, starting with 0. More importantly, the return of call is activated in the context of the current DOM element, so the keywordthisrefers to the element.
For example:
$(function() {
$(".mbox").each(function(index) {
console.log(index + ": " + $(this).text());
console.log($(this).attr('id'));
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="mbox">
<p id="p1">Lorem<span> <em>impsum</em></span></p>
<ul>
<li>Uno</li>
<li>Dos</li>
</ul>
</div>
<div id="div2" class="mbox">
<blockquote>Lorem impsum dolor sit amet</blockquote>
</div>
<div class="no-mbox">
<ul>
<li>Tres</li>
<li>Cuatro</li>
</ul>
</div>
<div id="div3" class="mbox">
<ul>
<li>Cinco</li>
<li>Seis</li>
</ul>
</div>
var elementos = $(".boton").map(function() {
return $(this).html();
}).get();
console.log(elementos);.boton {
background-color: #2980b9;
color: #ecf0f1;
width: 100px;
height: 30px;
text-align: center;
}
.elemento {
background-color: #ecf0f1;
color: #2980b9;
width: 100px;
height: 30px;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boton">
<a>UNO</a>
</div>
<div class="boton">
<a>DOS</a>
</div>
<div class="elemento">
<a>TRES</a>
</div>
<div class="boton">
<a>CUATRO</a>
</div>Reviewing what you propose, about getting items using a selector based on the name of the class, I could find the following:
$(this) to access the element .innerHTML parameter, use the .html () method. Maybe this is an incompatibility problem in the browser where you are executing the code, because if you try in another way:
var elementos = $(".boton").map(function() {
return this.innerHTML;
}).get();
console.log(elementos);.boton {
background-color: #2980b9;
color: #ecf0f1;
width: 100px;
height: 30px;
text-align: center;
}
.elemento {
background-color: #ecf0f1;
color: #2980b9;
width: 100px;
height: 30px;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boton">
<a>UNO</a>
</div>
<div class="boton">
<a>DOS</a>
</div>
<div class="elemento">
<a>TRES</a>
</div>
<div class="boton">
<a>CUATRO</a>
</div>If you notice you will get the same result you get using the .html () method. jQuery
Note: You must take into account that if you are getting the innerHTML of an element, you will get the literal string of html of what is inside the element, in example I used
<a>and the innerHTML will return the text content between<a>, but if you need to get all the composition of the element, you can useouterHTML.
If what you need is to access each of the properties of the HTML element, it would also be useful to use .each :
$(".boton").each(function() {
$(this).css("background-color", "red");
}).get();.boton {
background-color: #2980b9;
color: #ecf0f1;
width: 100px;
height: 30px;
text-align: center;
}
.elemento {
background-color: #ecf0f1;
color: #2980b9;
width: 100px;
height: 30px;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boton">
<a>UNO</a>
</div>
<div class="boton">
<a>DOS</a>
</div>
<div class="elemento">
<a>TRES</a>
</div>
<div class="boton">
<a>CUATRO</a>
</div>In this example we have referenced each of the html nodes, directly accessing them through jQuery and we have modified the background color that it had initially.
Do that:
$(".botonEstado").each(function( index ) {
//index <= del array
//$(this) <= boton actual
console.log( index + ": " + $( this ).text() );
});
For example:
$( document ).ready(function() {
$(".botonEstado").each(function( index ) {
//index <= del array
//$(this) <= boton actual
console.log( index + ": " + $( this ).text() );
});
});<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Boton Estado</title>
</head>
<body>
<button class="botonEstado" type="button">estado 1</button>
<button class="botonEstado" type="button">estado 2</button>
<button class="botonEstado" type="button">estado 3</button>
<button class="botonEstado" type="button">estado 4</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>It depends what you want to do with the elements you can use simply
$('.botonEstado');
that would be similar to
document.querySelectorAll('.botonEstado');
but being able to act on all the elements at the same time without having to iterate them, for example if you wanted to give them all a background color:
$('.botonEstado').css("background","yellow")<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="botonEstado">elemento seleccionado</div>
<div class="botonEstado">elemento seleccionado</div>
<div class="">no seleccionado</div>
<div class="botonEstado">elemento seleccionado</div>
<div class="botonEstado">elemento seleccionado</div>
<div class="">no seleccionado</div>The OP code works fine, at least in Stack Snippet, so probably the error is the jQuery version or you forgot to load jQuery
Demonstration:
var all = $(".mbox").map(function() {
return this.innerHTML;
}).get();
console.log(all.join());<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="mbox">Block One</div>
<div class="mbox">Block Two</div>
<div class="mbox">Block Three</div>
<div class="mbox">Block Four</div>
<p></p>