-1

i´ve wrote an Jquery function to my HTML, now the backend is adding <p> tags as wrapper for the variables. Is it possible to remove them via Jquery? I found some options to remove it out of HTML stuff like "class", but no way to do the same in a Jquery function. Maybe someone can help. Thanks

Now it is looking like that:

        $(document).ready(function(){
            $('#<p>1</p>').on('click', function(){
                $('#<p>berlin</p>').ScrollTo({
                duration: 800,
                easing: 'linear'
                });
            }); 
        });

It should look like that:

        $(document).ready(function(){
            $('#1').on('click', function(){
                $('#berlin').ScrollTo({
                duration: 800,
                easing: 'linear'
                });
            }); 
        });
Pointy
  • 405,095
  • 59
  • 585
  • 614
D20537
  • 31
  • 1
  • 8
  • 3
    How exactly are you including the JavaScript in your page? The best thing to do would be to prevent that from happening in the first place. – Pointy Jan 08 '16 at 14:50
  • 1
    You explain you have `
    ` item in your source code ?! In all case, `
    ` is not a valid id : http://stackoverflow.com/a/79022/2412797     – Bruno J. S. Lesieur Jan 08 '16 at 14:51
  • Fix the backend if it gives you troubles like that. – Johannes Jander Jan 08 '16 at 14:54
  • 1
    @Haeresis not true - numeric id values are OK in HTML5 documents. – Pointy Jan 08 '16 at 14:55
  • It is a kirby cms variable, and it adds a

    wrapper to the tags. It is possible to remove them in HTML tags. But i cant find a way to remove them out of Jquery.

     – D20537 Jan 08 '16 at 14:56
  • If you want help describe your problem properly. What does output from backend looks like? – dfsq Jan 08 '16 at 14:57
  • If you update all elements of a form, it will have performance impact and can even affect event handlers. Best options are, either update code on your backend or update your code that loops and create HTML. But if you still want to try, you will have to loop over all elements, check if they have child in recursion and update their `id` tags – Rajesh Jan 08 '16 at 15:01
  • The problem is with your use of the CMS, but you have not posted any of that code. – Pointy Jan 08 '16 at 15:01
  • @Pointy thx, I believed for HTML5 at least one numeric char was required but yeah, it's just a char. – Bruno J. S. Lesieur Jan 08 '16 at 15:22

3 Answers3

1

As said here (https://stackoverflow.com/a/79022/2412797):

For HTML 4, the answer is technically: ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

HTML 5 is even more permissive, saying only that an id must contain at least one character and may not contain any space characters.

But if you want do what you ask because you can not change the Back-end behavior, replace first the id value.

WARNING: because your code is probably not W3C compliant the following code is surely not cross-browser compliant. On Chrome, following works.

See this example:

var weirdItems = document.querySelectorAll("[id^='<p>']");

[].forEach.call(weirdItems, function (weirdItem) {
   weirdItem.setAttribute("id", 
       weirdItem.getAttribute("id")
           .replace(/<p>([-\w]+)<\/p>/g, "$1")
    );
});

console.log(
    document.getElementById("1"),
    document.getElementById("2")
);

assume your tags are

<div id="<p>1</p>" class="weird-item">Item1</div>
<div id="<p>2</p>" class="weird-item">Item2</div>

Codepen exemple here

But, the most wise thing to do is remove <p></p> from initial Back-end HTML generation.

Community
  • 1
  • 1
Bruno J. S. Lesieur
  • 3,612
  • 2
  • 21
  • 25
1

Something like that should convert <div id="<p>1</p>"></div> to <div id="1"></div>

$("[id^='<p>']").each(function() {
        var id = $(this).attr("id");
        $(this).attr("id", id.substring(3, id.length - 4));
    });
ibrahimb
  • 170
  • 1
  • 10
0

I´ve found a Kirby plugin which is solving my problem. Thanks for the help.

Here is the link to the plugin, if someone is interested in. https://github.com/jbeyerstedt/kirby-plugin-kirbytextRaw

D20537
  • 31
  • 1
  • 8