CODEWITHSUNDEEP
javascriptjquery
Silly Question Boy
Silly Question Boy

Reputation: 49

How to find the text content of a div

I'm sure this is simple but I just can't seem to work it out. I'm trying to get the text value within a div. The code below is from a search drop down result so the user will click on the search result and what is clicked on should then populate another div. But for the moment I just want to get the value within the div either "1" or "2" as a variable.

<html>
<head>
  <style>
      .number:hover{
          cursor: pointer;
      }
  </style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
$('#search_result').click(function() {
var txt =     
$(this).closest("#search_result").next(".number").find(".number").text();
alert(txt);
});
});
</script>

</head>
<body>
<div id="search_result" style="border-radius: 2px; border:   
1px solid rgb(204, 204, 204); z-index: 3; position: absolute; background-
color: white; width: 76.46%; display: block;">

<div class="dropdowncontainer" style="z-index:1000; border-bottom: 1px solid   
#E6E6E6; height:20%">

<div class="dropdown" style="height:20%; width:100%; z-index:10">
<div style="height:12px; width:50%; position: float-right">
<img src="1.jpg" style="height:100%; position: float-right" width="60px">
</div>
<div class="number" style="margin-top:-10px; width:100%">
<font color="#2947F2">
<b>1</b>
</font>
</div>
</div>
</div>

<div class="dropdowncontainer" style="z-index:1000; border-bottom: 1px solid   
#E6E6E6; height:20%">
<div class="dropdown" style="height:20%; width:100%; z-index:10">
<div style="height:12px; width:50%; position: float-right">
<img src="2.jpg" style="height:100%; position: float-right" width="60px">
</div>
<div class="number" style="margin-top:-10px; width:100%">
<font color="#2947F2">
<b>2</b>
</font>
</div>
</div>
</div>
</div>
</body>

Upvotes: 0

Views: 101

Answers (3)

Andrii Gordiichuk
Andrii Gordiichuk

Reputation: 1947

I think it

$(document).ready(function() {
  $("#search_result").on('click', 'div.number', function(event){  
    alert($(event.currentTarget).html());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search_result" style="border-radius: 2px; border:   
1px solid rgb(204, 204, 204); z-index: 3; position: absolute; background-
color: white; width: 76.46%; display: block;">

<div class="dropdowncontainer" style="z-index:1000; border-bottom: 1px solid   
#E6E6E6; height:20%">

<div class="dropdown" style="height:20%; width:100%; z-index:10">
<div style="height:12px; width:50%; position: float-right">
<img src="1.jpg" style="height:100%; position: float-right" width="60px">
</div>
<div class="number" style="margin-top:-10px; width:100%">
<font color="#2947F2">
<b>1</b>
</font>
</div>
</div>
</div>

<div class="dropdowncontainer" style="z-index:1000; border-bottom: 1px solid   
#E6E6E6; height:20%">
<div class="dropdown" style="height:20%; width:100%; z-index:10">
<div style="height:12px; width:50%; position: float-right">
<img src="2.jpg" style="height:100%; position: float-right" width="60px">
</div>
<div class="number" style="margin-top:-10px; width:100%">
<font color="#2947F2">
<b>2</b>
</font>
</div>
</div>
</div>
</div>

helps you: jsfiddle

Upvotes: 1

Bhavika
Bhavika

Reputation: 40

You should use only this $(this).text();

Upvotes: 0

Asking Questions
Asking Questions

Reputation: 404

I think this might suit your needs? I am using $.html() for this.

$(document).ready(function() {
  $('#search_result .number').click(function() {
    var txt =
      $(this).find("b").html();
    alert(txt);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search_result" style="border-radius: 2px; border:   
1px solid rgb(204, 204, 204); z-index: 3; position: absolute; background-
color: white; width: 76.46%; display: block;">

  <div class="dropdowncontainer" style="z-index:1000; border-bottom: 1px solid   
#E6E6E6; height:20%">

    <div class="dropdown" style="height:20%; width:100%; z-index:10">
      <div style="height:12px; width:50%; position: float-right">

      </div>
      <div class="number" style="margin-top:-10px; width:100%">
        <font color="#2947F2">
<b>1</b>
</font>
      </div>
    </div>
  </div>

  <div class="dropdowncontainer" style="z-index:1000; border-bottom: 1px solid   
#E6E6E6; height:20%">
    <div class="dropdown" style="height:20%; width:100%; z-index:10">
      <div style="height:12px; width:50%; position: float-right">

      </div>
      <div class="number" style="margin-top:-10px; width:100%">
        <font color="#2947F2">
<b>2</b>
</font>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions