Getting text values of div elements

Question

I'm trying to get the text values of all of my div elements.

My expected output is:

Menu 1
Abc 
Def
Menu 2
Ghi 
Jkl
Menu 3
Mno 
Pqr

But I get

Menu 1
Abc 
Def
Ghi 
Jkl
Mno 
Pqr
Menu 2
Abc 
Def
...

HTML

<div id="output">
  <div>
    <input type="text" value="Menu 1">
    <br />
    <a href="#">Abc</a>
    <br />
    <a href="#">Def</a>
    <br />
  </div>
  <div>
    <input type="text" value="Menu 2">
    <br />
    <a href="#">Ghi</a>
    <br />
    <a href="#">Jkl</a>
  </div>
  ...
</div>

JS

$("#output div").each(function() {
  console.log($(this).find("input").val());
  $("a").each(function() {
    console.log($(this).text() + "\n");
  });
});

Here is a fiddle.

@squint The solution may be using the `find` function. But the answer that you linked is not telling why OP is seeing that weird result. — Rajaprabhu Aravindasamy, Apr 10 '16 at 16:10
Neither `.each()` nor `.find()` are necessary to return expected results — guest271314, Apr 10 '16 at 16:10
@Raj: Naturally it wouldn't explain the output of the same problem in a different scenario. — , Apr 10 '16 at 16:11
@guest271314: It's marked as a duplicate because it's the same issue. Both in this question and the dupe, they're trying to get only the descendants of the current element. — , Apr 10 '16 at 16:12
@squint Neither `.each()` at Question is necessary to return expected results. What is your interpretation of issue? — guest271314, Apr 10 '16 at 16:13
@guest271314: I didn't say `.each()` was necessary. Not sure what you're getting at. The issue in both cases is that they don't know how to limit selection to the descendants of the current `this` element. — , Apr 10 '16 at 16:15
@squint That is not issue as see it here; issue is using `.each()`, or `.each()` twice, nested, instead of using another single available method — guest271314, Apr 10 '16 at 16:16
@guest271314: You need to keep in mind that this is very obviously a minimal example, which is exactly what they're supposed to post. So with that in mind, you need to grant that `.each()` may be needed in the actual situation to perform processing on each `div`. As such, the context needs to be limited to the current `div`. — , Apr 10 '16 at 16:18
@guest271314: Think about it for a moment. The OP clearly knows about the descendant selector already since he already has `"#output div"`, so it's safe to assume that he knows he can also do `"#output div a"`, yet didn't. There must be a reason for this, right? — , Apr 10 '16 at 16:20
@squint `.each()` is not necessary. If expected output is text, can utilize `.text(function(){})` — guest271314, Apr 10 '16 at 16:22
@guest271314: Again, you need to realize that this is obviously not real-world code, and as such you need to grant that each individual `a` is likely needed. You're trying to correct an algorithm without knowing what the algorithm is ultimately intended to do. — , Apr 10 '16 at 16:27
@user1170330 Is requirement to retrieve text content of `div` elements or text content of `a` elements within `div` elements? — guest271314, Apr 10 '16 at 16:59

Rajaprabhu Aravindasamy · Accepted Answer · 2016-04-10T16:10:59.747

4

You have to set the context for for the anchor selector,

$("a", this).each(function() {

DEMO

The above code will select the a elements present in the context this. Here in our case this will point to the div that we are iterating. If you use $("a") without any context then it will select all the a elements present in the entire DOM not inside a particular element.

edited Apr 10 '16 at 16:10

answered Apr 10 '16 at 16:05

Rajaprabhu Aravindasamy

66,513
17
101
130

score -1 · Answer 2 · answered Apr 10 '16 at 16:21

-1

I'm trying to get the text values of all of my div elements.

.each() is not necessary to return expected result. You can utilize .text()

$("#output div").text(function(index, text) {
  console.log($("input", this).val(), text);
  return text
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="output">
  <div>
    <input type="text" value="Menu 1">
    <br />
    <a href="#">Abc</a>
    <br />
    <a href="#">Def</a>
    <br />
  </div>
  <div>
    <input type="text" value="Menu 2">
    <br />
    <a href="#">Ghi</a>
    <br />
    <a href="#">Jkl</a>
  </div>
  ...
</div>

answered Apr 10 '16 at 16:21

guest271314

1
15
104
177

1

How do you know he doesn't need each `` text individually processed, or that beyond his minimal example, that there may be other text to avoid? You're providing an alternate based on assumptions instead of addressing the actual issue in the question. – Apr 10 '16 at 16:26
@squint No, actual Question is _"I'm trying to get the text values of all of my div elements."_ which http://api.jquery.com/text/#text-function can achieve. As `this` within current iteration is the element being iterated with `.text(function)` Have not added requirement to Question – guest271314 Apr 10 '16 at 16:27
1

And you're assuming that he doesn't need the text values individually as the code is clearly showing. – Apr 10 '16 at 16:28
@squint What do you mean by "need the text values individually" ? `.text()` _iterates_ each element at original selector, same as `.each()`. The values are individual. OP is only logging results to `console`. Nested `.each()` is not necessary to achieve expected results; e.g.; if `console.log(index)` should return the index of each `#output div` within original selector – guest271314 Apr 10 '16 at 16:29
1

Yes, `.text()` will give the whole text content for each `#output div` but in the question, he's attempting to get the text content for each individual `a` element separately. Your answer assumes that isn't needed. – Apr 10 '16 at 16:32
@squint See original Question _"I'm trying to get the text values of all of my **div** elements."_ OP does not indicate `a` elements, but `div` elements. Why add requirement to Question that is not present at actual Question? – guest271314 Apr 10 '16 at 16:33
I don't know how else to explain this to you. He provided a simple, reduced example of what he needs. There isn't much detail in his explanation, so we need to infer from his code example. He clearly knows about `.text()`, since it's in the question, so if he wanted the full text for each `div`, he would have done `$(this).text()` in the outer loop. He didn't do that. He chose to attempt to iterate each `a` element. So the OP does indicate `a` elements. You're simply ignoring that for some reason. – Apr 10 '16 at 16:36
@squint _"He clearly knows about .text()"_ OP may be aware of `.text()`, but not `.text(function)` . _"He chose to attempt to iterate each a element. You're simply ignoring that for some reason."_ Answering actual Question posed at OP. OP may not be aware that it is not necessary to select `a` to retrieve text content of entire `div` which includes `a` element - which is the actual Question _"I'm trying to get the text values of all of my **div** elements."_ If actual target element is `a` element, why iterate `div` elements at all? – guest271314 Apr 10 '16 at 16:38
Sure, maybe he doesn't know about `.text(function)`, but that's not relevant to the issue in the question. Again, you're having trouble realizing that this is not real world code, but rather a minimal example. We ask people to post those for our convenience, and you need to respect that. Right now you're ignoring it. – Apr 10 '16 at 16:40
*"If actual target element is a element, why iterate div elements at all?"* ***I already told you why above!*** – Apr 10 '16 at 16:41
@squint Well, from perspective here, not ignoring actual Question; also not imposing an interpretation onto requirement that is not clearly delineated at Question. If your interpretation is correct, again, there is no need to iterate `div` elements at all, but rather select `a` and `input` elements. We disagree about interpretation of actual Question, which is ok – guest271314 Apr 10 '16 at 16:43
Again, you're not recognizing the fact that this is a ***minimal*** example. How do you know that in the real-world code, he doesn't need each `div`? But [I already went over this with you](http://stackoverflow.com/questions/36532075/getting-text-values-of-div-elements?noredirect=1#comment60668270_36532075). I have no interpretation except that which is shown in the code provided. – Apr 10 '16 at 16:45
@squint Am only answering actual Question posed at OP. SO allows multiple answers to single Question. _"How do you know that in the real-world code, he doesn't need each div"_ Because OP does not state this? Each `div` is available as `this` at `.text(function)` – guest271314 Apr 10 '16 at 16:46
The "actual Question" doesn't consist of a single sentence, as much as you'd like it to be true. The OP did state it by providing a code example that suggests it. Each `div` is also available as `this` in `.each(function)`. Who cares? – Apr 10 '16 at 16:47
@squint _"The "actual Question" doesn't consist of a single sentence"_ That is not accurate: _"I'm trying to get the text values of all of my div elements."_ – guest271314 Apr 10 '16 at 16:48
@squint Does stacksnippets return expected result as described by OP at _"My expected output is:"_ ? – guest271314 Apr 10 '16 at 16:51
No, it doesn't. Yours adds extra whitespace, which is clearly not present in the expected output, which represents how it would look if each individual `` element was traversed. – Apr 10 '16 at 16:52
@squint OP did not actually ask for text of `a` elements, but text of `div` elements. How do you know that whitespace is not part of requirement? – guest271314 Apr 10 '16 at 16:53

Getting text values of div elements

2 Answers2

DEMO