আমি jQuery সহ পাঠ্য নোডগুলি কীভাবে নির্বাচন করব?

Question

আমি jQuery সংগ্রহ হিসাবে কোনও উপাদানটির সমস্ত বংশধর পাঠ্য নোডগুলি পেতে চাই। এটি করার সর্বোত্তম উপায় কী?

Answer 1

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

var getTextNodesIn = function(el) {
    return $(el).find(":not(iframe)").addBack().contents().filter(function() {
        return this.nodeType == 3;
    });
};

getTextNodesIn(el);

দ্রষ্টব্য: আপনি jQuery 1.7 বা তার আগে ব্যবহার করছেন, উপরের কোডটি কাজ করবে না। এটির সমাধান করতে, প্রতিস্থাপন addBack()সঙ্গে andSelf()। andSelf()পক্ষে অবচিত addBack()1.8 থেকেই।

খাঁটি ডিওএম পদ্ধতির তুলনায় এটি কিছুটা অদক্ষ এবং এতে jQuery এর contents()কার্যকারিতা ওভারলোডিংয়ের জন্য একটি কুৎসিত workaround অন্তর্ভুক্ত করতে হবে (এটি নির্দেশ করার জন্য মন্তব্যে @rabidsnail ধন্যবাদ), তাই এখানে একটি সরল পুনরাবৃত্তি ফাংশনটি ব্যবহার করে নন-জিক্যুরি সমাধান রয়েছে। includeWhitespaceNodesপরামিতি নিয়ন্ত্রণ থাকুক বা না থাকুক হোয়াইটস্পেস টেক্সট নোড আউটপুট মধ্যে অন্তর্ভুক্ত করা হয় (jQuery মধ্যে তারা স্বয়ংক্রিয়ভাবে ফিল্টার করা হয়)।

আপডেট: হোয়াইটস্পেসনোডগুলি অন্তর্ভুক্ত থাকাতে স্থির বাগ।

function getTextNodesIn(node, includeWhitespaceNodes) {
    var textNodes = [], nonWhitespaceMatcher = /\S/;

    function getTextNodes(node) {
        if (node.nodeType == 3) {
            if (includeWhitespaceNodes || nonWhitespaceMatcher.test(node.nodeValue)) {
                textNodes.push(node);
            }
        } else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                getTextNodes(node.childNodes[i]);
            }
        }
    }

    getTextNodes(node);
    return textNodes;
}

getTextNodesIn(el);

Comments

উপাদানটি কি প্রবেশ করতে পারে, কোনও ডিভের নাম হতে পারে?

— crosenblum

@ ক্রোসেনব্লুম: আপনি document.getElementById()যদি বলতে চান তবে আপনি প্রথমে কল করতে পারেন:var div = document.getElementById("foo"); var textNodes = getTextNodesIn(div);

— টিম ডাউন

JQuery এ একটি বাগের কারণে আপনার এলতে যদি কোনও আইফ্রেম থাকে তবে আপনাকে .find ('*') এর পরিবর্তে .find (': না (iframe)') ব্যবহার করতে হবে।

— bobpoekert

@ আরবিডসনেল: আমি মনে করি, .contents()যেভাবেই হোক না কেন এর ব্যবহার দ্বারা বোঝা যাচ্ছে এটি ইফ্রেমেও অনুসন্ধান করবে। আমি দেখতে পাচ্ছি না এটি কীভাবে বাগ হতে পারে।

— রবিন মাবেন

bugs.jquery.com/ticket/11275 এটি আসলে কোনও বাগটি বিতর্কের পক্ষে রয়েছে বলে মনে হয়, তবে আপনি যদি ('*') খুঁজে বের করেন তবে বিষয়গুলি () কোনও নোডে রয়েছে যা একটি iframe রয়েছে যা এতে নেই ডোমে যুক্ত করা হয়েছে আপনি একটি অপরিবর্তিত বিন্দুতে ব্যতিক্রম পাবেন।

— ববপোকার্ট

Answer 2

জাওকো একটি মন্তব্যে একটি ভাল সমাধান পোস্ট করেছেন, তাই আমি এটি এখানে অনুলিপি করছি:

$(elem)
  .contents()
  .filter(function() {
    return this.nodeType === 3; //Node.TEXT_NODE
  });

Comments

প্রকৃতপক্ষে $ (এলেম)। সামগ্রী () .ফিল্টার (ফাংশন () this এটিকে ফিরিয়ে দিন ode নোডটাইপ == নোড.TEXT_NODE;}); যথেষ্ট

— জাকো

: IE7 নোড বিশ্বব্যাপী সংজ্ঞায়িত না, তাই আপনি this.nodeType == 3, দুর্ভাগ্যবশত ব্যবহার করতে হবে stackoverflow.com/questions/1423599/node-textnode-and-ie7

— খ্রিস্টান Oudard

এটি কি ওপি অনুরোধ হিসাবে উপাদানটির বংশধরদের পরিবর্তে কেবলমাত্র পাঠ্য নোডগুলিকেই ফেরত দেয় না যা উপাদানটির বংশধরদের চেয়ে বেশি?

— টিম ডাউন

পাঠ্য নোডটি অন্যান্য উপাদানের অভ্যন্তরে গভীরভাবে নিখরচায়

— minhajul

@ জাকো, না, যথেষ্ট নয়! হিসাবে বিষয়বস্তু () কেবল তাত্ক্ষণিক শিশুদের নোডগুলি ফেরত দেয়

— মিনহাজুল

Answer 3

$('body').find('*').contents().filter(function () { return this.nodeType === 3; });

Answer 4

jQuery.contents()jQuery.filterসমস্ত শিশু পাঠ্য নোডগুলি খুঁজে পেতে ব্যবহার করা যেতে পারে । সামান্য মোচড়ের সাহায্যে আপনি নাতি-নাতনী পাঠ্য নোডগুলিও খুঁজে পেতে পারেন। কোন পুনরাবৃত্তি প্রয়োজন:

$(function() {
  var $textNodes = $("#test, #test *").contents().filter(function() {
    return this.nodeType === Node.TEXT_NODE;
  });
  /*
   * for testing
   */
  $textNodes.each(function() {
    console.log(this);
  });
});

div { margin-left: 1em; }

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

<div id="test">
  child text 1<br>
  child text 2
  <div>
    grandchild text 1
    <div>grand-grandchild text 1</div>
    grandchild text 2
  </div>
  child text 3<br>
  child text 4
</div>

jsFiddle

Answer 5

আমি গ্রহণযোগ্য ফিল্টার ফাংশন সহ প্রচুর খালি পাঠ্য নোড পাচ্ছি। যদি আপনি কেবল পাঠ্য নোডগুলি বেছে nodeValueনেওয়ার বিষয়ে আগ্রহী হন যেখানে শ্বেতস্থান থাকে না তবে আপনার filterফাংশনে শর্তসাপেক্ষ যোগ করার চেষ্টা করুন, সাধারণের মতো $.trim(this.nodevalue) !== '':

$('element')
    .contents()
    .filter(function(){
        return this.nodeType === 3 && $.trim(this.nodeValue) !== '';
    });

http://jsfiddle.net/ptp6m97v/

বা অদ্ভুত পরিস্থিতিগুলি এড়িয়ে যাওয়ার জন্য যেখানে সামগ্রীটি সাদা স্থানের মতো দেখায়, তবে তা নয় (যেমন নরম হাইফেন ­চরিত্র, নিউলাইনস \n, ট্যাব ইত্যাদি), আপনি নিয়মিত এক্সপ্রেশন ব্যবহার করে চেষ্টা করতে পারেন। উদাহরণস্বরূপ, \Sকোনও অ-শ্বেতস্থান অক্ষরের সাথে মিলবে:

$('element')
        .contents()
        .filter(function(){
            return this.nodeType === 3 && /\S/.test(this.nodeValue);
        });

Answer 6

যদি আপনি এই ধারণাটি করতে পারেন যে সমস্ত শিশু হয় এলিমেন্ট নোড বা পাঠ্য নোড, তবে এটিই একটি সমাধান।

সমস্ত শিশু পাঠ্য নোডগুলিকে জেকুরি সংগ্রহ হিসাবে পেতে:

$('selector').clone().children().remove().end().contents();

পাঠ্যবিহীন শিশুদের সাথে মূল উপাদানটির একটি অনুলিপি পেতে:

$('selector').clone().children().remove().end();

Comments

সবেমাত্র অন্য উত্তরে টিম ডাউনের মন্তব্য লক্ষ্য করা গেছে। এই সমাধানটি কেবল প্রত্যক্ষ বাচ্চাদের পায়, সমস্ত বংশধর নয়।

— কল্লিন

Answer 7

কোনও কারণে contents()আমার পক্ষে কাজ করেনি, সুতরাং এটি যদি আপনার পক্ষে কাজ না করে, তবে আমি তৈরি একটি সমাধান এখানে দিয়েছিjQuery.fn.descendants পাঠ্য নোডগুলি অন্তর্ভুক্ত করার বিকল্পটি দিয়ে বা না

ব্যবহার

---

পাঠ্য নোড এবং উপাদান নোড সহ সমস্ত বংশধরদের পান

jQuery('body').descendants('all');

---

সমস্ত বংশধরদের কেবল পাঠ্য নোড ফেরত পান

jQuery('body').descendants(true);

---

সমস্ত বংশধরদের কেবলমাত্র উপাদান নোডগুলি ফেরত পান Get

jQuery('body').descendants();

---

Coffeescript মূল :

jQuery.fn.descendants = ( textNodes ) ->

    # if textNodes is 'all' then textNodes and elementNodes are allowed
    # if textNodes if true then only textNodes will be returned
    # if textNodes is not provided as an argument then only element nodes
    # will be returned

    allowedTypes = if textNodes is 'all' then [1,3] else if textNodes then [3] else [1]

    # nodes we find
    nodes = []


    dig = (node) ->

        # loop through children
        for child in node.childNodes

            # push child to collection if has allowed type
            nodes.push(child) if child.nodeType in allowedTypes

            # dig through child if has children
            dig child if child.childNodes.length


    # loop and dig through nodes in the current
    # jQuery object
    dig node for node in this


    # wrap with jQuery
    return jQuery(nodes)

জাভাস্ক্রিপ্ট সংস্করণ ড্রপ

var __indexOf=[].indexOf||function(e){for(var t=0,n=this.length;t<n;t++){if(t in this&&this[t]===e)return t}return-1}; /* indexOf polyfill ends here*/ jQuery.fn.descendants=function(e){var t,n,r,i,s,o;t=e==="all"?[1,3]:e?[3]:[1];i=[];n=function(e){var r,s,o,u,a,f;u=e.childNodes;f=[];for(s=0,o=u.length;s<o;s++){r=u[s];if(a=r.nodeType,__indexOf.call(t,a)>=0){i.push(r)}if(r.childNodes.length){f.push(n(r))}else{f.push(void 0)}}return f};for(s=0,o=this.length;s<o;s++){r=this[s];n(r)}return jQuery(i)}

স্বাক্ষরিত জাভাস্ক্রিপ্ট সংস্করণ: http://pastebin.com/cX3jMfuD

এটি ক্রস ব্রাউজার, Array.indexOfকোডের মধ্যে একটি ছোট পলিফিল অন্তর্ভুক্ত।

Answer 8

এটিও এর মতো করা যায়:

var textContents = $(document.getElementById("ElementId").childNodes).filter(function(){
        return this.nodeType == 3;
});

উপরের কোডটি প্রদত্ত উপাদানের সরাসরি শিশুদের নোড থেকে পাঠ্য নোডগুলি ফিল্টার করে।

Comments

... তবে সমস্ত বংশধর শিশু নোড নয় (যেমন একটি পাঠ্য নোড যা মূল উপাদানটির একটি শিশু একটি উপাদান) child

— টিম ডাউন

Answer 9

আপনি যদি সমস্ত ট্যাগ ফেলা করতে চান, তবে এটি চেষ্টা করে দেখুন

ফাংশন:

String.prototype.stripTags=function(){
var rtag=/<.*?[^>]>/g;
return this.replace(rtag,'');
}

ব্যবহার:

var newText=$('selector').html().stripTags();

Answer 10

আমার জন্য, পুরানো .contents() পাঠ্য নোডগুলি ফিরিয়ে আনতে কাজ করার জন্য হাজির হয়েছিল, কেবল আপনার নির্বাচকদের সাথে সতর্কতা অবলম্বন করা উচিত যাতে আপনি জানেন যে তারা পাঠ্য নোড হবে।

উদাহরণস্বরূপ, এটি আমার টেবিলে টিডির সমস্ত পাঠ্য সামগ্রী preট্যাগ সহ মোড়ানো এবং কোনও সমস্যা ছিল না।

jQuery("#resultTable td").content().wrap("<pre/>")

Answer 11

আমারও একই সমস্যা ছিল এবং এর সাথে সমাধান করেছি:

কোড:

$.fn.nextNode = function(){
  var contents = $(this).parent().contents();
  return contents.get(contents.index(this)+1);
}

ব্যবহার:

$('#my_id').nextNode();

এর মতো next()তবে পাঠ্য নোডগুলিও ফেরত দেয়।

Comments

.nextSibling ডম স্পেসিফিকেশন থেকে: ডেভেলপার.মোজিলা.আর.এন /

— গিলারমো