Question

我的dom看起来像这样：

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

现在我希望从<span>的句号开头到div.wrapper以外的其他标记获取一系列<span> s。所以这是结果：

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

有什么想法我能做到吗？

以下是我尝试的内容：

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

但它并不支持＆＃34;序列＆＃34;一部分。

Answer 1

正如评论中提到的那样，您可以使用nextUntil和addBack的组合来添加第一个匹配的节点：

$('.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

一种可能的解决方案是缩小选择范围，将其与each()结合使用，例如像这样：

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>

如果可以有任何元素类型的组合，您需要确保他们选择的索引与其标记索引匹配。

在下面的示例中，这意味着选择中的第3个span将具有索引2，但在标记中，它是第6个元素，索引为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

您可以这样做：

＆＃13;

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());
});

＆＃13;

<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>

＆＃13;

我在keepGoing回调函数之外定义了一个开关（filter），并在遇到非{false时将其设置为span 1}}元素。

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

4 个答案: