something something else link <div>whatever"> something something else link <div>whatever"> something something else link <div>whatever" />

ラッパーになっているすべての要素をどのように選択できますか?

私の母さんはこんな感じです:

<div class="wrapper">
    something
    something else
    link
    <div>whateveranother thing
</div>

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

something
something else

どのようにしてそれを行うことができますかという考えはありますか?


これが私が試したものです:

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

しかし、それはその「シーケンス」部分をサポートしません。

0
追加された 著者 GhitaB,

4 答え

コメントで述べたように、最初に一致するノードを追加するために addUack と組み合わせて nextUntil を使用できます。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('.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">
    something
    something else
    and more
    and once again
    last one
    link
    <div>whatever</div>
    another thing
</div>
</div> </div>

4
追加された
$(this).html()はオブジェクト i.stackを返します。 imgur.com/ZMyYq.png 私は結果の長いテキストが欲しいのですが(スパンはテキストとして結合されるべきです)。
追加された 著者 stack,
ダン!驚くばかり
追加された 著者 Alexander Solonik,
@stack each()関数を見れば、コンソールにHTMLを出力しているだけなので、ノードをどうするか自分で決めることができます。
追加された 著者 Alex K,
はい。 :D私はここで同様のものを作成しました: jsfiddle.net/ky0xoop2/8
追加された 著者 GhitaB,

考えられる解決策の1つは、セレクタを each()と組み合わせて絞り込むことです。このような:

スタックスニペット

<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

$(".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">
    something
    something else
    link
    <div>whatever</div>
    another thing
</div>
</div> </div>


要素タイプの組み合わせがある可能性がある場合は、それらの選択されたインデックスがそれらのマークアップインデックスと一致することを確認する必要があります。

以下のサンプルでは、​​選択範囲の3番目の span にはインデックス2が付きますが、マークアップではインデックス5の6番目の要素になります。

スタックスニペット

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(".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">
    something
    something else
    link
    <div>whatever</div>
    another thing
    something 2
    something else 2
</div>
</div> </div>

3
追加された
この $(this).html()はオブジェクトです。どうやってそれを純粋なテキストにすることができますか? (テキストだけでなく、HTMLも保持する必要がありますが、プレーンテキストとして)
追加された 著者 stack,
コードがオブジェクトであることを確認してください。長い文字列として取得したい
追加された 著者 stack,
これが実際の私のコードです: ] .outerHTML}));
追加された 著者 stack,
あなたが知っている、私はlocalStorageに something 何か他の のような何かを保存する必要があります。そのため、 JSON.stringify()または .get()を使用する必要があるか、 :-( がわかりません。
追加された 著者 stack,
これは私が考えたことでもあり、質問の説明にも当てはまります。 +1以外のタグ
追加された 著者 gurvinder372,
しかし、問題は、他の連続する span が後である場合、それもそれらに一致することです。
追加された 著者 gurvinder372,
@LGSon jsfiddle.net/1865yyL1/1 をご覧ください。
追加された 著者 gurvinder372,
@ LGSonはい、今動作します。それがなぜうまくいくのかについての説明を追加してください。
追加された 著者 gurvinder372,
これを行う方法は次のとおりです。 stackoverflow.com/questions/37123035/…
追加された 著者 LGSon,
@ gurvinder372正しく、そしてCSSを使ってそれをカバーすることができないので、私はマッチした選択/マークアップインデックスをチェックするアップデートを追加しました。
追加された 著者 LGSon,
@stack Use $(this)[0] .outerHTML ...私の答えを更新しました
追加された 著者 LGSon,
@ gurvinder372すぐに確認できます。
追加された 著者 LGSon,
@ gurvinder372これは span の最初のシーケンスだけを選択します。 2のみを選択する場合は、 nth-child(-n + 2)を使用できます。
追加された 著者 LGSon,

あなたはこのようなことをすることができます:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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">
  something
  something else
  link
  <div>whatever</div>
    another thing
</div>
</div> </div>

ここでは、 filter コールバック関数の外側でスイッチ( keepGoing )を定義しています。 span 要素

0
追加された
下落票の説明が役に立つでしょう。
追加された 著者 Titus,
<div class="wrapper">
  something
  something else
  link
  <div>whatever</div>
  another thing
</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/

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript