Jquery function to find the first element with an id

Question

Suppose I have something like this

<div class="xx" data-id="tid">Jumbo Jet</div>
<div class="press"> clickme </div>
<div class="foo">
   ....
</div> 
<div class="xx" data-id="tid">Hello World</div>
<div class="xx" data-id="tid">Red Brown Fox</div>

Is there a jquery function that would search under it (not its child) for a specific id and return back the first result. In this case I should get "Hello World". Will the find method work ? I am doing something like this

$(".press").click(function () {
    var item = $(this).find("#tid");
    //Get the classname
    var name = item.attr('class'); //returns undefined should return xx
    //Also how do I return the content ? "Hello World"
    console.log(name); 
});

Any suggestions on what I might be doing wrong here ?

how about using the next() method? api.jquery.com/next I assume you could do var item = $(this).next() — Jon B
– Jon B, Commented Sep 9, 2019 at 0:57
The problem is that you have duplicate IDs in the first place, which is invalid HTML. I'd suggest changing those to classes instead, assuming you have access to the HTML. — Obsidian Age
– Obsidian Age, Commented Sep 9, 2019 at 0:57
Like the others already said: ID's should always be unique! There's simply no excuse not to do this. If using classes isn't an option for you, you can use data- attributes instead. — icecub
– icecub, Commented Sep 9, 2019 at 1:04

Christian Carrillo · Accepted Answer · 2019-09-09 01:48:47Z

1

Considering:

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

update: you could use nextAll() to find under the current element and get element by his data attribute and filter the first match.

You could try this:

$(".press").click(function () {
    var item = $(this).nextAll('[data-id="tid"]:first')
    var name = item.attr('class')    
    var content = item.html() // html() get the html content
    console.log('class name:', name); 
    console.log('content:', content); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="xx" data-id="tid">Jumbo Jet</div>
<div class="press"> clickme </div>
<div class="foo">
   ....
</div> 
<div class="xx" data-id="tid">Hello World</div>
<div class="xx" data-id="tid">Red Brown Fox</div>

edited Sep 9, 2019 at 1:48

answered Sep 9, 2019 at 1:06

Christian Carrillo

2,7612 gold badges11 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Icewine · Accepted Answer · 2019-09-09 01:47:20Z

1

If you want to use something like an id but not have the conflicts, I would recommend using data-id.

$(".press").on("click", function(){

  var content = "";
  content = $(this).next("[data-id='tid']").html();

  console.log(content);
  
});

.press:hover {
  cursor: pointer;
  background: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<br><hr><br>

<div class="xx" data-id="tid">Jumbo Jet</div>
<div class="press"> clickme </div>
<div class="xx" data-id="tid">Hello World</div>
<div class="xx" data-id="tid">Red Brown Fox</div>
<br><hr><br>
<div class="xx" data-id="tid">Jumbo Jet 2</div>
<div class="press"> clickme </div>
<div class="xx" data-id="tid">Hello World 2</div>
<div class="xx" data-id="tid">Red Brown Fox 2</div>

edited Sep 9, 2019 at 1:47

answered Sep 9, 2019 at 1:12

Icewine

1,8511 gold badge13 silver badges22 bronze badges

2 Comments

MistyD Over a year ago

This fails if there are other classes right after the press button

Icewine Over a year ago

I am not sure what you mean about it failing. I have put more classes after this as a test and as you can see it chooses the next occurrence of the data-id="tid". What part is failing for you specifically?

Parsa · Accepted Answer · 2019-09-09 01:09:05Z

0

id property should be unique, not Repetitious. You can use a class with the same name.

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). https://www.w3schools.com/html/html_id.asp

$(".press").click(function () {
  var item = $(this).next(".xx");
  //Get the classname
  var name = item.attr('class'); //returns undefined should return xx
  //Also how do I return the content ? "Hello World"
  console.log(name); 

  console.log(item.text()); 
});

answered Sep 9, 2019 at 1:09

Parsa

6441 gold badge6 silver badges15 bronze badges

Collectives™ on Stack Overflow

Jquery function to find the first element with an id

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related