jQueryを使用してアイテムがユーザーによってリストに追加されたかどうかを確認する -- javascript フィールド と jquery フィールド と html フィールド と dom フィールド 関連 問題

Using Jquery to check if items have been added to a list by user












1
vote

問題

日本語

私は、アイテムのドロップダウンを使用するためにアイテムを追加できるリストを持っています。ユーザーの動作を追跡し、ユーザーがこのリストに何かを追加するたびに機能を実行したい(削除されません)。リストは次のようになります:

<事前> <コード> filter { if ([message]~ = "Audit") { grok { match => { "message" => "%{WORD:uuid}, %{WORD:action}, %{WORD:resultCode}, %{WORD:browser}, %{WORD:ipAddress}, %{WORD:application}, %{NUMBER:timeTaken}" } add_field => ["action", "%{action}"] add_field => ["application", "%{application}"] } } } 1

ドロップダウンを使用してリストに項目を追加することができます、この問題はそれらのアイテムへのリンクのjQueryセレクタはありませんので、代わりにアイテムがリストに追加されたときに検出しようとしています。

これまでの試みは次のとおりです。

filter { if ([message]~ = "Audit") { grok { match => { "message" => "%{WORD:uuid}, %{WORD:action}, %{WORD:resultCode}, %{WORD:browser}, %{WORD:ipAddress}, %{WORD:application}, %{NUMBER:timeTaken}" } add_field => ["action", "%{action}"] add_field => ["application", "%{application}"] } } } 2 - 現在リストにあるアイテムの数を数えることができます。ただし、ユーザーがより多くの項目を追加したかどうかを確認する方法はうまくいきません。私はjQueryに新しくて、誰かがここで正しい方向に私を指すことができれば感謝しますか?ありがとう

英語

I have a list which users can add items to using a drop down of items. I'm tracking user behavior and want to execute a function each time a user ADDS something to this list (not removes it). The list looks like this:

<ul class="items-list" id="user-items">   <li id="newitem1"></li>    <li id="newitem2"></li> </ul> 

They can add more items to the list with the dropdown, the issue is there are no Jquery selectors for the links to those items, so I am instead trying to detect when items are added to the list.

My attempts so far are:

var listOfItems = $("#user-items").children() - I can count how many items are currently in the list. However I can't work out how to check whether the user has added more items. I am new to Jquery and would appreciate if someone could point me in the right direction here? Thanks

</div
           
 
 

回答リスト

2
 
vote
vote
ベストアンサー
 

DomSubTreeModifiedイベントを使用し、新しい要素がDOMに追加されたかどうかを確認します。

<事前> <コード> $("#a").bind("DOMSubtreeModified", function() { alert("list updated"); });

デモ: fiddle

 

Use DOMSubtreeModified event and check if new element added to DOM.

$("#a").bind("DOMSubtreeModified", function() {     alert("list updated"); }); 

Demo: Fiddle

</div
 
 
     
     
0
 
vote

新しいアイテムを追加する前に、jQuery .each()を使用してドロップダウンのすべての値を確認できます。

<事前> <コード> <ul class="items-list" id="user-items"> <li id="newitem1"></li> <li id="newitem2"></li> </ul>

jQuery:

<事前> <コード> $( "li" ).each(function( index ) { console.log( index + ": " + $( this ).text() ); });

リファレンス: https://api.jquery.com/each/

 

All the values of dropdown can be checked using Jquery .each() before adding new item.

<ul class="items-list" id="user-items">   <li id="newitem1"></li>    <li id="newitem2"></li> </ul> 

Jquery:

$( "li" ).each(function( index ) {   console.log( index + ": " + $( this ).text() ); }); 

Reference : https://api.jquery.com/each/

</div
 
 
   
   
0
 
vote

DOMの特定の部分の突然変異を観察して、発生時に何でもすることができます。

ドキュメント: https://developer.mozilla.org/ ja-us / docs / web / api / mutationobserver

例:

 <コード> const itemsList = document.querySelector("#user-items");    const observer = new MutationObserver((mutationList, observer) => {    mutationList.forEach((mutation) => {      if (mutation.type === "childList") {        // Do whatever you want here, I'm just logging that        // a child of the <ul> has been added.        console.log("A child node has been added");        }    });  });    observer.observe(itemsList, { childList: true, subtree: true });    /**   * Just some basic code to add items to the list. Not jQuery, but   * you already have this code I assume, so this is just here to make   * the demo work   */  const itemAdder = document.querySelector("#add-item");  let itemNumber = 0;    itemAdder.addEventListener("click", (e) => {    itemNumber++;    const listItem = document.createElement("LI");    listItem.setAttribute("id", `user-item-${itemNumber}`);    const listItemText = document.createTextNode(`List item ${itemNumber}`);    listItem.appendChild(listItemText);    itemsList.appendChild(listItem);  });  
 <コード> <ul id="user-items">  </ul>    <button id="add-item">Add Item</button>  
 

You can observe mutations in that specific part of the DOM and do whatever you want when they occur.

Documentation here: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Example:

const itemsList = document.querySelector("#user-items");    const observer = new MutationObserver((mutationList, observer) => {    mutationList.forEach((mutation) => {      if (mutation.type === "childList") {        // Do whatever you want here, I'm just logging that        // a child of the <ul> has been added.        console.log("A child node has been added");        }    });  });    observer.observe(itemsList, { childList: true, subtree: true });    /**   * Just some basic code to add items to the list. Not jQuery, but   * you already have this code I assume, so this is just here to make   * the demo work   */  const itemAdder = document.querySelector("#add-item");  let itemNumber = 0;    itemAdder.addEventListener("click", (e) => {    itemNumber++;    const listItem = document.createElement("LI");    listItem.setAttribute("id", `user-item-${itemNumber}`);    const listItemText = document.createTextNode(`List item ${itemNumber}`);    listItem.appendChild(listItemText);    itemsList.appendChild(listItem);  });
<ul id="user-items">  </ul>    <button id="add-item">Add Item</button>
</div
 
 
0
 
vote

try ... with0 try ... with1 を使用して、 try ... with2 に変更を監視する機能を提供します。これは、<コード> <ul class="items-list" id="user-items"> <li id="newitem1"></li> <li id="newitem2"></li> </ul> 13 イベント仕様の一部であった古い突然変異イベント機能の代わりとして設計されています。 これが実施例です。

 <コード> try ... with4  
 <コード> try ... with5  
 

You can achieve so by using MutationObserver.The MutationObserver interface provides the ability to watch for changes being made to the DOM tree . It is designed as a replacement for the older Mutation Events feature which was part of the DOM3 Events specification. here is a working example.

var targetNode = $("#user-items");  function createObserver(callback) {      return new MutationObserver(function (mutationRecords) {          mutationRecords.forEach(callback);      });  }    $("#user-items").each(function () {      var obs = createObserver(function (mutation) {          $(mutation.addedNodes).css("background-color", "green");      });      obs.observe(this, { childList: true });  });        setTimeout(function(){    $("#user-items").append('<li id="newitem3">New One</li>');  },1000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  <ul class="items-list" id="user-items">    <li id="newitem1">Old One</li>     <li id="newitem2">Old two</li>  </ul>
</div
 
 

関連する質問

0  IFrameにHTMLをロードするだけです  ( Only load html into an iframe ) 
ページ上のすべてのCSS、スクリプト、イメージ、ビデオのダウンロードを自動的にトリガーすることなく、ページのHTMLのみを読み込むことができますか? またはあなたはDOMが「準備完了」である瞬間にイベントを得ることができます。最初のHTMLがロードされていない...

1279  jQueryでクッキーを設定/設定解除するにはどうすればよいですか。  ( How do i set unset a cookie with jquery ) 
jQueryを使用してCookieを設定して設定します。たとえば、 test という名前のクッキーを作成し、 1 ?に設定します。 ...

0  動的に作成されたコンテンツ上でjQuery show /非表示の実行  ( Performing jquery show hide on dynamically created content ) 
jQueryで作成したページを持っていて、このページではテーブル行が特定の色としてそれらを識別するクラス名(すなわちTR Class = "YellowClass")があるテーブルです。 ユーザーは、特定の色のテーブルを表示/非表示にするチェックボックスを...

3  JavaScriptのDOMノードの変更を検出する方法はありますか?  ( Is there a way to detect a dom node change in javascript ) 
特定のDOMノード内で何か変更があれば検出する方法を探しています。これを行うイベントやその他のテクニックはありますか? ありがとう! ...

4  IEにインラインスタイル要素をどのようにコピーしますか?  ( How do you copy an inline style element in ie ) 
IEは、スタイルまたはヘッド要素のInnerHtmlプロパティへの書き込みを許可しません。それで、ある文書の頭から別の文書の頭部からスタイル要素をどのようにコピーしますか? ...

1371  どのDOM要素が焦点を当てているのかわかりますか?  ( How do i find out which dom element has the focus ) 
JavaScriptでは、現在どの要素に焦点を当てています。私はDOMを見て、必要なものを見つけていません。これを行う方法はありますか? 私がこれを探していた理由: 矢印や enter のようなキーを入力要素の表を移動しようとしています。タブが機能しますが、...

5  Internet Explorerが新しいウィンドウでフォームの送信を開くのはなぜですか、動的に挿入されたIFrameではなく?  ( Why does internet explorer open form submission in a new window and not in a dyn ) 
隠された、動的に動的に挿入されたiframeにフォームを投稿しようとしていますが、Internet Explorerでは新しいウィンドウでフォームの送信が開きます。 <事前> <コード> var iframe = document.createElement(...

0  EventListener関数に値を渡す  ( Passing value to eventlistener functions ) 
<事前> <コード> for ( var i=0; i<thumbs.length; i++) { var num = i; Core.addEventListener(thumbs[i], "click", Slide.thumbClick...

0  すべての画像をdiv背景要素に置き換えます  ( Replace all images with div background element ) 
<事前> <コード> var all = document.getElementsByTagName( 'img' ); for( i = 0; i < all.length; i++ ){ var newimg; (newimg=docume...

18  Container Divのサイズを変更するには、その子の合計高さまで?  ( How to resize a container div to the total height of its children ) 
私はその内容としてサイズ変更する必要があるコンテナ要素を持っています。それは2つの絶対位置決めされたDIVを含みます。コンテナの高さを指定しないと、コンテナがコンテンツの下で消えた後に何でも。 私は次のようにしていますが、より面倒な代替案を見つけることを嬉し...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有