如何选择包装器中的所有元素？

Question

My dom looks like this:

<div class="wrapper">
    <span>something</span>
    <span>something else</span>
    <a href="#">link</a>
    <div><b>whatever</b</div>
    <span>another thing</span>
</div>

Now I want to get a sequence of <span> s from the beginning of vale of div.wrapper until a tag else than <span> . So here is the result:

<span>something</span>
<span>something else</span>

Is there any idea how can I do that?

---

Here is what I've tried:

$(".wrapper").find("span").html();

But it doesn't support that "sequence" part.

Answer 1

As someone mentioned in the comment, you can use the nextUntil with the combination of addBack to add the first matching node:

 $('.wrapper > span:first').nextUntil(':not(span)').addBack().each(function() { console.log( $( this ).html() ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <span>something</span> <span>something else</span> <span>and more</span> <span>and once again</span> <span>last one</span> <a href="#">link</a> <div><b>whatever</b></div> <span>another thing</span> </div> 

Answer 2

One possible solution is to narrow your selector, combined it with each() , eg like this:

Stack snippet

 $(".wrapper span:first-child, .wrapper span + span").each(function() { // get inner HTML //console.log( $( this ).html() ); // get outer HTML console.log( $( this )[0].outerHTML ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <span>something</span> <span>something else</span> <a href="#">link</a> <div><b>whatever</b></div> <span>another thing</span> </div> 

---

In case where there can be any combination of element types, you need to make sure their selected index match their markup index.

In the below sample that would mean that the 3rd span in the selection will have index 2 but in markup it is the 6th element with an index of 5.

Stack snippet

 $(".wrapper span:first-child, .wrapper span + span").each(function(selected_index) { // if not same index, return if (selected_index != $( this ).index()) return; // get outer HTML console.log( $( this )[0].outerHTML ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <span>something</span> <span>something else</span> <a href="#">link</a> <div><b>whatever</b></div> <span>another thing</span> <span>something 2</span> <span>something else 2</span> </div> 

Answer 3

<div class="wrapper">
  <span>something</span>
  <span>something else</span>
  <a href="#">link</a>
  <div><b>whatever</b></div>
  <span>another thing</span>
</div>

// start
var spanning = true;
// loop
$('.wrapper').children().each(function() {

  // if still good and this is a span
  if (spanning && $(this).is('span')) {
    console.log($(this).text());
  // still good but 1st non-span encountered
  } else if (spanning && $(this).not('span')) {
    // "break"
    spanning = false;
  }
});

https://jsfiddle.net/5uogfd5j/5/

Answer 4

You can do something like this:

 var keepGoing = true; $(".wrapper").children().filter(function() { if (!$(this).is("span")) { keepGoing = false; } return keepGoing; }).each(function(i) { console.log("filtered element: " + i + ", content: " + $(this).text()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <span>something</span> <span>something else</span> <a href="#">link</a> <div><b>whatever</b></div> <span>another thing</span> </div> 

Here I'm defining a switch ( keepGoing ) outside the filter callback function and I'm setting it to false once I encounter a non- span element.