আমি কীভাবে কোনও এলিমেন্টের শিশু উপাদান পরিবর্তন না করে এটির পাঠ্য পরিবর্তন করতে পারি?

Question

আমি উপাদানটির পাঠকে গতিশীলভাবে আপডেট করতে চাই:

<div>
   **text to change**
   <someChild>
       text that should not change
   </someChild>
   <someChild>
       text that should not change
   </someChild>
</div>

আমি jQuery এ নতুন, সুতরাং এই কাজটি আমার জন্য বেশ চ্যালেঞ্জ বলে মনে হচ্ছে। কেউ কি আমাকে কোনও ফাংশন / নির্বাচক ব্যবহার করতে নির্দেশ করতে পারে?

যদি এটি সম্ভব হয় তবে আমি যে পাঠ্যটি পরিবর্তন করতে হবে তার জন্য নতুন ধারক যুক্ত না করে এটি করতে চাই।

Comments

"যদি এটি সম্ভব হয় তবে আমি যে পাঠ্যটি পরিবর্তন করতে হবে তার জন্য নতুন ধারক যুক্ত না করে এটি করতে চাই” " - সত্যি? কারণ সেখানে একটি ধারক সহ এটি আরও সহজ হবে।

— পল ডি ওয়েট

বন্ধুরা, আমি মূল প্রশ্নটি দেখেছিলাম এবং আমার মনে হয় না যে ওপি শিশু উপাদানগুলির বিষয়ে কিছু বলেছিল ...

— Vidime Vidas

ডাব্লু 3 মান অনুসারে ডিভের এমনকি পাঠ্য নোডও থাকতে পারে না (যদি আমি সঠিক মনে করি)। <p>, <h1> ইত্যাদির মতো একটি পাঠ্য ধারক যুক্ত করা উচিত।

— মার্ক বাইজেন্স

@ মার্ক: সম্ভবত (এক্স) এইচটিএমএল স্ট্রাইক ইন, তবে আর নেই। (এইচটিএমএল

— পল ডি ওয়েট

@ ম্যাট বল: প্রকৃত এইচটিএমএলে সামারচিল্ডের পরিবর্তে স্প্যান ট্যাগ রয়েছে।

— আইকা

Answer 1

মার্কের jQuery ব্যবহার করে আরও ভাল সমাধান পাওয়া গেছে তবে আপনি সম্ভবত নিয়মিত জাভাস্ক্রিপ্টে এটি করতে সক্ষম হবেন।

জাভাস্ক্রিপ্টে, childNodesসম্পত্তি আপনাকে পাঠ্য নোড সহ একটি উপাদানগুলির সমস্ত শিশু নোড দেয়।

সুতরাং, যদি আপনি যে পাঠ্যটি পরিবর্তন করতে চেয়েছিলেন তা যদি সর্বদা প্রথম উপাদান হতে শুরু করে থাকে তবে উদাহরণস্বরূপ এই এইচটিএমএল দেওয়া হয়েছে:

<div id="your_div">
   **text to change**
   <p>
       text that should not change
   </p>
   <p>
       text that should not change
   </p>
</div>

আপনি এটি করতে পারেন:

var your_div = document.getElementById('your_div');

var text_to_change = your_div.childNodes[0];

text_to_change.nodeValue = 'new text';

অবশ্যই, আপনি এখনও <div>প্রথম স্থানে (অর্থাত্ var your_div = $('your_div').get(0);) নির্বাচন করতে jQuery ব্যবহার করতে পারেন ।

Comments

পাঠ্য নোড প্রতিস্থাপন করার প্রয়োজন নেই। কেবল বিদ্যমান কারও dataবা nodeValueসম্পত্তি পরিবর্তন করুন ।

— টিম ডাউন

@ টিম: আহ, আমি ভেবেছিলাম এর চেয়ে সহজ উপায় অবশ্যই আছে। JQuery আসার আগে কখনও খুব বেশি জাভাস্ক্রিপ্ট করেনি। চিয়ার্স, আমি সেই অনুযায়ী উত্তরটি সম্পাদনা করব।

— পল ডি ওয়েট

সুতরাং এই উত্তরটির আরও $('#yourDivId')[0].childNodes[0].nodeValue = 'New Text';

— ডিন মার্টিন

দ্বারা পর্যন্ত সবচেয়ে কম এবং সহজ সমাধান - stackoverflow.com/a/54365288/4769218

— সিলভার Ringvee

"আপনি নিয়মিত জাভাস্ক্রিপ্টেও এটি করতে সক্ষম হতে পারেন"

— দুহাইম

Answer 2

আপডেট 2018

যেহেতু এটি একটি দুর্দান্ত জনপ্রিয় উত্তর, আমি প্লাগইন হিসাবে টেক্সটনোড নির্বাচককে jQuery এ যুক্ত করে এটি সামান্য আপডেট এবং সুন্দর করার সিদ্ধান্ত নিয়েছি।

নীচের স্নিপেটে আপনি দেখতে পাচ্ছেন যে আমি একটি নতুন জিকুয়েরি ফাংশন সংজ্ঞায়িত করেছি যা সমস্ত (এবং কেবল) পাঠ্য নোডগুলি পায়। আপনি উদাহরণস্বরূপ first()ফাংশনটির সাথে এই ফাংশনটির চেইনও করতে পারেন । আমি টেক্সট নোডে একটি ছাঁটাই করি এবং এটি ট্রিমের পরে খালি না তা যাচাই করি কারণ ফাঁকা স্থান, ট্যাবগুলি, নতুন লাইনগুলি ইত্যাদি পাঠ্য নোড হিসাবে স্বীকৃত। আপনার যদি সেই নোডগুলির খুব বেশি প্রয়োজন হয় তবে jQuery ফাংশনে স্টেট স্টেটমেন্ট থেকে সরান।

আমি প্রথম টেক্সট নোডটি কীভাবে প্রতিস্থাপন করব এবং সমস্ত পাঠ্য নোড কীভাবে প্রতিস্থাপন করব তা আমি একটি উদাহরণ যুক্ত করেছি।

এই পদ্ধতির কোডটি পড়া সহজ করে তোলে এবং একাধিকবার এবং বিভিন্ন উদ্দেশ্যে এটি ব্যবহার করা সহজ করে তোলে।

আপডেট 2017 (adrach) যদি আপনি যে পছন্দ করা এখনও পাশাপাশি কাজ করা উচিত।

JQuery এক্সটেনশন হিসাবে

//Add a jQuery extension so it can be used on any jQuery object
jQuery.fn.textNodes = function() {
  return this.contents().filter(function() {
    return (this.nodeType === Node.TEXT_NODE && this.nodeValue.trim() !== "");
  });
}

//Use the jQuery extension
$(document).ready(function(){
  $('#replaceAll').on('click', () => {
    $('#testSubject').textNodes().replaceWith('Replaced');
  });

  $('#replaceFirst').on('click', () => {
    $('#testSubject').textNodes().first().replaceWith('Replaced First');
  });
});

p {
  margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testSubject">
   **text to change**
   <p>text that should not change</p>
   <p>text that should not change</p>
   **also text to change**
   <p>text that should not change</p>
   <p>text that should not change</p>
   **last text to change**
</div>
<button id="replaceFirst">Replace First</button>
<button id="replaceAll">Replace All</button>

জাভাস্ক্রিপ্ট (ES) eivivilant

//Add a new function to the HTMLElement object so it cna be used on any HTMLElement
HTMLElement.prototype.textNodes = function() {
  return [...this.childNodes].filter((node) => {
    return (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() !== "");
  });
}

//Use the new HTMLElement function
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#replaceAll').addEventListener('click', () => {
    document.querySelector('#testSubject').textNodes().forEach((node) => {
      node.textContent = 'Replaced';
    });
  });

  document.querySelector('#replaceFirst').addEventListener('click', function() {
    document.querySelector('#testSubject').textNodes()[0].textContent = 'Replaced First';
  });
});

p {
  margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testSubject">
  **text to change**
  <p>text that should not change</p>
  <p>text that should not change</p>
  **also text to change**
  <p>text that should not change</p>
  <p>text that should not change</p>
  **last text to change**
</div>
<button id="replaceFirst">Replace First</button>
<button id="replaceAll">Replace All</button>

---

আপডেট আপডেট 2017 (অ্যাড্র্যাচ):

দেখে মনে হচ্ছে এটি পোস্ট হওয়ার পরে বেশ কয়েকটি জিনিস পরিবর্তিত হয়েছে। এখানে একটি আপডেট সংস্করণ

$("div").contents().filter(function(){ return this.nodeType == 3; }).first().replaceWith("change text");

---

আসল উত্তর (বর্তমান সংস্করণে কাজ করছে না)

$("div").contents().filter(function(){ return this.nodeType == 3; })
.filter(':first').text("change text");

সূত্র: http://api.jquery.com/contents/

Comments

আহা! আমি জানতাম যে কোথাও একটি চতুর jQuery ফাংশন হবে। আপনি যেমন লিখেছেন ঠিক তেমনই সমস্যাটি হ'ল প্রতিটি পাঠ্য নোড পরবর্তী পাঠ্য (যেমন শিশু উপাদানগুলির মধ্যে থাকাগুলি সহ) পান। আমার ধারণা এটি সীমাবদ্ধ করা খুব কঠিন হবে না যদিও?

— পল ডি ওয়েট

ব্যবহার করতে আমার কিছুটা সমস্যা হয়েছিল .filter(':first'), তবে .first()পরিবর্তে ব্যবহার করা আমার পক্ষে কাজ করেছিল। ধন্যবাদ!

— হল্লাবু

এটি .text()( এই jsfiddle দেখুন ) দিয়ে আমার পক্ষে কাজ করে না তবে .replaceWith()( jsfiddle এখানে ) দিয়ে কাজ করে।

— ম্যাজিক্যালেক্স

এটি টেক্সটঅবজেক্ট = $ (মাই নোড) হিসাবে উপাদান হিসাবে কুরুচিপূর্ণভাবে কাজ করে। );

— ম্যারাগিউস

যে কারও সম্পর্কে কৌতূহলী nodeType=3হ'ল তার মানে কেবলমাত্র "

— নেক্সট

Answer 3

কর্মে দেখুন

মার্কআপ :

$(function() {
  $('input[type=button]').one('click', function() {
    var cache = $('#parent').children();
    $('#parent').text('Altered Text').append(cache);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">Some text
  <div>Child1</div>
  <div>Child2</div>
  <div>Child3</div>
  <div>Child4</div>
</div>
<input type="button" value="alter text" />

Comments

এখন পর্যন্ত আমি সেরা সমাধানটি পেয়েছি। মার্জিত এবং সহজ।

— Yoav Kadosh

এটি অবশ্য নোডের ক্রম সংরক্ষণ করবে না। উদাহরণস্বরূপ, যদি পাঠটি প্রথমে উপাদানটির শেষে ছিল, এটি এখন শুরুতে হবে।

— ম্যাট

এটি অর্ডার সংরক্ষণ করবে না তবে বেশিরভাগ ক্ষেত্রে আপনি প্রথম বা শেষ নোড হিসাবে পাঠ্যটি চান। সুতরাং যদি সংযোজন () পছন্দসই ফলাফল না পেয়ে থাকে তবে আপনি বিদ্যমান শিশুদের পাঠ্যের মুখোমুখি করতে চান তবে প্রিপেন্ড করুন () চেষ্টা করুন।

— সেনসেই

দ্বারা পর্যন্ত সবচেয়ে কম এবং সহজ সমাধান - stackoverflow.com/a/54365288/4769218

— সিলভার Ringvee

Answer 4

<div id="divtochange">
    **text to change**
    <div>text that should not change</div>
    <div>text that should not change</div>
</div>

$(document).ready(function() {
    $("#divtochange").contents().filter(function() {
            return this.nodeType == 3;
        })
        .replaceWith("changed text");
});

এটি শুধুমাত্র প্রথম পাঠ্যনোড পরিবর্তন করে

Answer 5

ক্লাস নির্বাচন করার জন্য আপনি যে স্প্যানটিতে স্প্যান পরিবর্তন করতে চান তা কেবল মোড়ানো করুন।

আমি জানি আপনার প্রশ্নের উত্তর জরুরীভাবে দেয় না তবে সম্ভবত একটি আরও ভাল কোডিং অনুশীলন। জিনিসগুলি পরিষ্কার এবং সরল রাখুন

<div id="header">
   <span class="my-text">**text to change**</span>
   <div>
       text that should not change
   </div>
   <div>
       text that should not change
   </div>
</div>

ভাল খবর!

$('#header .mytext').text('New text here')

Comments

এটিই সেরা সমাধান!

— স্লিক গীক

Answer 6

নির্দিষ্ট ক্ষেত্রে আপনি উল্লেখ করেছেন:

<div id="foo">
   **text to change**
   <someChild>
       text that should not change
   </someChild>
   <someChild>
       text that should not change
   </someChild>
</div>

... এটি খুব সহজ:

var div = document.getElementById("foo");
div.firstChild.data = "New text";

আপনি কীভাবে এটি সাধারণ করতে চান তা আপনি উল্লেখ করেন না। যদি, বলুন, আপনি প্রথম পাঠ্য নোডের পাঠ্যটির মধ্যে পরিবর্তন করতে চান তবে <div>আপনি এরকম কিছু করতে পারেন:

var child = div.firstChild;
while (child) {
    if (child.nodeType == 3) {
        child.data = "New text";
        break;
    }
    child = child.nextSibling;
}

Answer 7

$.fn.textPreserveChildren = function(text) {
  return this.each(function() {
    return $(this).contents().filter(function() {
      return this.nodeType == 3;
    }).first().replaceWith(text);
  })
}

setTimeout(function() {
  $('.target').textPreserveChildren('Modified');
}, 2000);

.blue {
  background: #77f;
}
.green {
  background: #7f7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="target blue">Outer text
  <div>Nested element</div>
</div>

<div class="target green">Another outer text
  <div>Another nested element</div>
</div>

Answer 8

এখানে এখনো অন্য পদ্ধতি: http://jsfiddle.net/qYUBp/7/

এইচটিএমএল

<div id="header">
   **text to change**
   <div>
       text that should not change
   </div>
   <div>
       text that should not change
   </div>
</div>

jQuery

var tmp=$("#header>div").html();
$("#header").text("its thursday").append(tmp);

Answer 9

এখানে প্রচুর দুর্দান্ত উত্তর রয়েছে তবে তারা কেবল বাচ্চাদের সাথে একটি পাঠ্য নোড পরিচালনা করে। আমার ক্ষেত্রে আমার সমস্ত পাঠ্য নোডে পরিচালনা করা এবং এইচটিএমএল শিশুদের উপেক্ষা করার দরকার ছিল তবে অর্ডারটি সংরক্ষণ করুন।

সুতরাং আমাদের যদি এরকম কেস থাকে:

<div id="parent"> Some text
    <div>Child1</div>
    <div>Child2</div>
    and some other text
    <div>Child3</div>
    <div>Child4</div>
    and here we are again
</div>

আমরা কেবলমাত্র পাঠ্যটি সংশোধন করতে এবং আদেশ সংরক্ষণ করতে নিম্নলিখিত কোডটি ব্যবহার করতে পারি

    $('#parent').contents().filter(function() {
        return this.nodeType == Node.TEXT_NODE && this.nodeValue.trim() != '';
    }).each(function() {
    		//You can ignore the span class info I added for my particular application.
        $(this).replaceWith(this.nodeValue.replace(/(\w+)/g,"<span class='IIIclassIII$1' onclick='_mc(this)' onmouseover='_mr(this);' onmouseout='_mt(this);'>$1X</span>"));
	});

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<div id="parent"> Some text
    <div>Child1</div>
    <div>Child2</div>
    and some other text
    <div>Child3</div>
    <div>Child4</div>
    and here we are again
</div>

এখানে এটির jsfiddle কাজ করছে

Answer 10

আমি মনে করি আপনি .prependTo () খুঁজছেন।

http://api.jquery.com/prependTo/

আমরা পৃষ্ঠায় একটি উপাদান নির্বাচন করতে এবং এটি অন্যটিতে সন্নিবেশ করতে পারি:

$ ( 'H2') prependTo ($ ( 'ধারক।'))।

যদি এই উপায়ে নির্বাচিত কোনও উপাদান অন্য কোথাও sertedোকানো হয়, তবে এটি লক্ষ্যবস্তুতে স্থানান্তরিত হবে (ক্লোন নয়):

<div class="container">  
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div> 
</div>

যদি একাধিক লক্ষ্য উপাদান থাকে তবে, প্রথমটির পরে প্রতিটি টার্গেটের জন্য sertedোকানো উপাদানটির ক্লোন অনুলিপি তৈরি করা হবে।

Comments

আমি মনে করি না. দেখে মনে হচ্ছে ওপি পাঠ্য পরিবর্তন করার জন্য কোনও উপায় খুঁজছে, নতুন পাঠ্য যুক্ত করছে না।

— ম্যাট বল

Answer 11

সহজ উত্তর:

$("div").contents().filter(function(){ 
  return this.nodeType == 3; 
})[0].nodeValue = "The text you want to replace with"

Answer 12

মার্কের উত্তরে সমস্যা হ'ল আপনি খালি পাঠ্যনোডগুলি পাশাপাশি পাবেন। JQuery প্লাগইন হিসাবে সমাধান:

$.fn.textnodes = function () {
    return this.contents().filter(function (i,n) {
        return n.nodeType == 3 && n.textContent.trim() !== "";
    });
};

$("div").textnodes()[0] = "changed text";

Answer 13

এটি একটি পুরানো প্রশ্ন তবে আপনি নিজের জীবনকে আরও সহজ করতে আপনি এর মতো একটি সাধারণ কাজ করতে পারেন:

$.fn.toText = function(str) {
    var cache = this.children();
    this.text(str).append(cache);
}

উদাহরণ:

<div id="my-div">
   **text to change**
   <p>
       text that should not change
   </p>
   <p>
       text that should not change
   </p>
</div>

ব্যবহার:

$("#my-div").toText("helloworld");

Answer 14

2019 ভ্যাসারিশন - সংক্ষিপ্ত ও সাধারণ

document.querySelector('#your-div-id').childNodes[0].nodeValue = 'new text';

ব্যাখ্যা

document.querySelector('#your-div-id') পিতামাতার বাছাই করার জন্য ব্যবহৃত হয় (আপনি যে উপাদানটি পরিবর্তন করতে চলেছেন সেই উপাদানটি)

.childNodes[0] পাঠ্য নোড নির্বাচন করে

.nodeValue = 'new text' "নতুন পাঠ্য" এ পাঠ্য নোডের মান সেট করে

---

এই উত্তর সম্ভবত ডিন মার্টিনের মন্তব্যে অনুপ্রাণিত হয়েছে। আমি বেশ কয়েক বছর ধরে এই সমাধানটি ব্যবহার করে আসছি বলে নিশ্চিত করে বলতে পারি না। কেবল ভেবেছিলাম আমার এই সম্ভাবনাটি এখানে পোস্ট করা উচিত কারণ কিছু লোকেরা এটি সর্বোত্তম সমাধান হ'ল তার চেয়ে বেশি যত্ন করে।

Comments

আপনি কেবল 2014 থেকে ডিন মার্টিনের মন্তব্য অনুলিপি করেছেন এবং এটি আপনার 2019 এর সমাধান হিসাবে দাবি করেছেন। এছাড়াও jQuery এবং সরল জাভাস্ক্রিপ্টের অপ্রয়োজনীয় সংমিশ্রণটি ব্যবহার করুন যা আমার মতে ভাল পাঠযোগ্যতার জন্য খারাপ অভ্যাস। সর্বশেষে আপনি কীভাবে আপনার সমাধানটি কাজ করে সে সম্পর্কে কোনও বিবরণ দেননি। এটি সবচেয়ে জটিল নয় তবে এটিও সমস্যা নয় তাই সম্ভবত এটি সম্ভবত নতুন প্রোগ্রামাররা যারা এটি পড়েন যারা কিছু অতিরিক্ত ব্যাখ্যা ব্যবহার করতে পারেন উদাহরণস্বরূপ যে আপনি অ্যারে সূচকটি অ্যাক্সেসের মাধ্যমে jQuery অবজেক্ট থেকে নেটিভ ডোম নোড পান।

— মার্ক বাইজেনস

@ মারকবাইজেনস আমি মনে করি আপনি ঠিকই থাকতে পারেন, ডিন মার্টিনের মন্তব্য সম্ভবত এই স্নিপেটটি আমি কয়েক বছর আগে পেয়েছিলাম। যাইহোক, আমি তখন থেকেই এটি ব্যবহার করছি এবং এটি আমার ব্যক্তিগত কোড রেপো (যেখানে আমি দরকারী স্ক্রিপ্টগুলি তালিকাবদ্ধ করি) থেকে অনুলিপি করেছি। আরও বিশদ ব্যাখ্যা যুক্ত এবং অপ্রয়োজনীয় jQuery মুছে ফেলা হয়েছে।

— সিলভার রিঙ্গভী

এটি এখন পর্যন্ত সবচেয়ে সহজ সমাধান যা আসলে কাজ করে এবং লোকেরা এটি ব্যবহার করা উচিত, যদিও আপনি ডিন মার্টিনকে creditণ না দিয়ে এটিকে নিজের হিসাবে বন্ধ করার জন্য কোনও কুদোস পান না। আমি মার্ক বাইজেন্সের সাথেও একমত যে এই ক্ষেত্রে খাঁটি ভ্যানিলা জেএস বাস্তবায়ন jQuery এবং ভ্যানিলা জেএস মিশ্রণের চেয়ে ভাল। শুধু ভাল পাঠযোগ্যতার জন্য নয়, আরও ভাল পারফরম্যান্সের জন্য যেমন jQuery জিনিসগুলি ধীর করে দেয়।

— মিকি 180

@ মিকি 180 - আমি ইতিমধ্যে উপরে বলেছি যে এটি সম্ভব, আমি প্রথম কোথায় এই সমাধান পেয়েছি তা মনে নেই। আমি এখন আমার কাজগুলিতে এটি বছরের পর বছর ধরে ব্যবহার করছি। উত্তরে একটি নোট যুক্ত করেছেন। আশা করি, এটি আপনার মতো লোকদের সহায়তা করে যারা এখানে এসও তে সেরা সমাধানের বিষয়ে চিন্তা করে না:

— রৌপ্য রিংভি