CODEWITHSUNDEEP
javascriptjqueryhtml
Amazon
Amazon

Reputation: 476

Html into search text with jquery

I return the elements of the list with a for loop.
I left one of the elements in this list below as an example.
My goal is to reach the label in this html and read the text value. How can I do that?

<li>
   <a class="dd-option"> <input class="dd-option-value" type="hidden" value="3"> 
      <img class="dd-option-image" src="/Images/Sample/0.png"> 
      <label class="dd-option-text">Sampleee</label> 
      <small class="dd-option-description dd-desc">Sample sampleee.</small>
   </a>
</li>

Upvotes: 1

Views: 111

Answers (2)

Mamun
Mamun

Reputation: 68943

Using vanilla JS:

You can find the element with querySelector() and access innerText or textContent property.

var labelText = document.querySelector('label.dd-option-text').textContent;
console.log(labelText);
<li>
   <a class="dd-option"> <input class="dd-option-value" type="hidden" value="3"> 
      <img class="dd-option-image" src="/Images/Sample/0.png"> 
      <label class="dd-option-text">Sampleee</label> 
      <small class="dd-option-description dd-desc">Sample sampleee.</small>
   </a>
</li>

Using jQuery: Access the text() on the returned object:

var labelText = $('label.dd-option-text').text();
console.log(labelText);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
   <a class="dd-option"> <input class="dd-option-value" type="hidden" value="3"> 
      <img class="dd-option-image" src="/Images/Sample/0.png"> 
      <label class="dd-option-text">Sampleee</label> 
      <small class="dd-option-description dd-desc">Sample sampleee.</small>
   </a>
</li>

Upvotes: 5

vs_lala
vs_lala

Reputation: 735

Jquery

let yourListElement = $("ul li")
console.log(yourListElement.find("label").text())

Vanilla Javascript

yourListElement.querySelector(".dd-option-text").textContent

Upvotes: 1

Related Questions