How to reference only the first occurrences of an A tag using jQuery?

Asked

Viewed 89 times

1

I have the following HTML:

<div class="block_content_inner">
<div class="details_block">
    <b>Title:</b>
    "Titulo do Filme"
    <b>Genre:</b>
    <a href="#">Action</a>
    <a href="#">Adventure</a>
    <a href="#">Fantasy</a>
    <div class="director_row">
        <b>Director</b>
        <a href="#">Diretor 1</a>
        <a href="#">Diretor 2</a>
    </div>
    <div class="director_row">
        <b>Studio</b>
        <a href="#">Studio 1</a>
        <a href="#">Studio 2</a>
    </div>
    <div class="director_row">
        <b>Serie</b>
        <a href="#">Nome da Trilogia</a>
    </div>
</div>

I need to reference the first 3 tags <a> who are just after the tag <b>Genre</b>, but can happen to have 1 tag a or several, it would need to be in a dynamic way.

I almost got it, but in one attempt it brings only the value of the first tag <a> or brings values of all tags <a> that are in this div, including those within the <div class="director_row">

I would need the value of tags <a>after the tag <b>Genre</b> and before the div <div class="director_row">.

I can’t manipulate HTML, I just need to reference the way it already exists.

jquery

3 answers

2

It wouldn’t necessarily need jQuery, what you have to look at is the selector.

In the CSS

.details_block > a { }

In the jQuery 

$(document).ready(function(){
    $(".details_block > a").addClass('minhaclass');
});

It just takes the <a> direct children of .details_block

$(document).ready(function(){
    $(".details_block > a").addClass('minhaclass');
});
.details_block > a {
  font-size: 20px;
}
.minhaclass {
  color:red;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="block_content_inner">
	<div class="details_block">
		<b>Title:</b>
		"Titulo do Filme"
		<b>Genre:</b>
		<a href="#">Action</a>
		<a href="#">Adventure</a>
		<a href="#">Fantasy</a>
		<div class="director_row">
			<b>Director</b>
			<a href="#">Diretor 1</a>
			<a href="#">Diretor 2</a>
		</div>
		<div class="director_row">
			<b>Studio</b>
			<a href="#">Studio 1</a>
			<a href="#">Studio 2</a>
		</div>
		<div class="director_row">
			<b>Serie</b>
			<a href="#">Nome da Trilogia</a>
		</div>
	</div>
</div>

  • "which are just after the <b>Genre</b tag>" the selector ".details_block > a" would work for this case, for the tags exactly after the tag "b"?

  • @Ricardopunctual yes would work, the "problem" is that it takes all of the <a> direct children, no matter the position, it means that if you have a <a> there at the end after the last Row it will also be selected. But as his code does not have this other element, I thought it could be of some use, since it selects only the elements described

  • Good answer, but it seems to me that he wants to select the elements to do some manipulation via jQuery, and not to change styles. Soon via CSS seems to me not to be useful in this case. : / Let’s see what he will say. If it’s just to change style, will choose your answer; :D

  • 1

    Ah tah rs... had not seen the part with jQuery catching the direct children. It is a cool way tb, as long as it does not invent to later add other links within the div rs.

  • @Sam I had put with jQuery later, then he can manipulate as he wants. This question that you raise sometimes frustrates me a little. Because we give an answer that works for what was posted in the question.... Then after we answer, come the "replicates" and if that, and if that... ai complica rss. In case if he tv any other direct <a> son the selector tb will pick him up, but as in the question does not have, I thought that would be a fitting answer :), but if he says he has another direct <a> son that he does not want to catch my rule will fall, or I will need one . not() maybe

  • I understand and I think it is exaggerated to even foresee possibilities that could disable the answer, but there is a lot here of taking -1 in the answer because the approach does not foresee possibilities. I don’t particularly give -1 in answers like that, unless it’s something loud. But it’s cool. Often when the answer does not foresee possibilities, the AP appears the other day asking for rss corrections... tmj

  • @Sam we have some users who are experts on this :/

  • @hugocsl All the answers were good, some did not reach my goal but taught me something new. I appreciate your taking the time to assist me. I chose the other answer as correct just because it is a little more complete, but both achieve my goal. Thank you also for teaching me something new.

  • @D.Watson quiet young don’t worry about it, I’m happy to help! []s

Show 4 more comments

1


Use the method .prevUntil(), selecting the first div with the class .director_row. It will pick up all the elements between the first div.director_row and the element <b>Genre:</b>:

var els = $(".director_row:first").prevUntil("b");

// só exemplo para ilustrar
// os links ficarão vermelhos
els.each(function(){
  $(this).css("color", "red");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="details_block">
    <b>Title:</b>
    "Titulo do Filme"
    <b>Genre:</b>
    <a href="#">Action</a>
    <a href="#">Adventure</a>
    <a href="#">Fantasy</a>
    <div class="director_row">
        <b>Director</b>
        <a href="#">Diretor 1</a>
        <a href="#">Diretor 2</a>
    </div>
    <div class="director_row">
        <b>Studio</b>
        <a href="#">Studio 1</a>
        <a href="#">Studio 2</a>
    </div>
    <div class="director_row">
        <b>Serie</b>
        <a href="#">Nome da Trilogia</a>
    </div>
</div>

Using nextUntil()

Another way is to start catching the first link <a> until the last before the div.director_row using nextUntil():

var els = $(".details_block a:first")
         .nextUntil(".director_row")
         .addBack();

// exemplo para alterar as cores
// não inclua no seu código
els.each(function(){
  $(this).css("color", "red");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="details_block">
    <b>Title:</b>
    "Titulo do Filme"
    <b>Genre:</b>
    <a href="#">Action</a>
    <a href="#">Adventure</a>
    <a href="#">Fantasy</a>
    <div class="director_row">
        <b>Director</b>
        <a href="#">Diretor 1</a>
        <a href="#">Diretor 2</a>
    </div>
    <div class="director_row">
        <b>Studio</b>
        <a href="#">Studio 1</a>
        <a href="#">Studio 2</a>
    </div>
    <div class="director_row">
        <b>Serie</b>
        <a href="#">Nome da Trilogia</a>
    </div>
</div>

Note: if using a version earlier than 1.8 jQuery, use .andSelf() in place of .addBack().

  • 1

    Very interesting methods to create a selection range!

0

First we need to find the "b" tag element that has the "Genre" content":

$("b:contains('Genre:')")

Then, the next 3 elements of the "a" tag. For this we use nextAll, to get the next elements on the same level, then we use the lt(x) to get the "x" elements we want:

nextAll("a:lt(3)")

The complete code is as below, and I changed the style to demonstrate the working selector:

$("b:contains('Genre:')").nextAll("a:lt(3)").css('color','red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block_content_inner">
<div class="details_block">
    <b>Title:</b>
    "Titulo do Filme"
    <b>Genre:</b>
    <a href="#">Action</a>
    <a href="#">Adventure</a>
    <a href="#">Fantasy</a>
    <div class="director_row">
        <b>Director</b>
        <a href="#">Diretor 1</a>
        <a href="#">Diretor 2</a>
    </div>
    <div class="director_row">
        <b>Studio</b>
        <a href="#">Studio 1</a>
        <a href="#">Studio 2</a>
    </div>
    <div class="director_row">
        <b>Serie</b>
        <a href="#">Nome da Trilogia</a>
    </div>
</div>

  • The method :lt is mt good, but like the number of tags <a> can be variable, use a fixed value 3 won’t funfar.

  • yeah, I just used it to answer the 3 first tags" of the question, but it really is fixed :(

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.